<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8" />

  <meta http-equiv="X-UA-Compatible" content="IE=edge" />

  <meta name="viewport" content="width=device-width, initial-scale=1.0" />

  <title>Document</title>

  <style>

    * {

      margin: 0;

      padding: 0;

    }

    .app {

      width: 100%;

      height: 100%;

      background-color: lightblue;

      position: absolute;

      display: flex;

      justify-content: center;

      align-items: center;

    }

    #main {

      width: 300px;

      height: 200px;

      background-color: white;

      z-index: 999;

      position: absolute;

    }

    #main:hover {

      cursor: move;

    }

  </style>

</head>

<body>

  <div class="app">

    <div id="main">

    </div>

  </div>

</body>

</html>

<script>

  let login = document.querySelector('#main');

  login.addEventListener('mousedown', (e) => {

    let x = e.pageX - login.offsetLeft

    let y = e.pageY - login.offsetTop

    document.addEventListener('mousemove', move)

    function move(e) {

      login.style.left = e.pageX - x + 'px';

      login.style.top = e.pageY - y + 'px';

    }

    //鼠标抬起，销毁鼠标移动事件

    document.addEventListener('mouseup', function () {

      document.removeEventListener('mousemove', move);

    })

  });

  console.log(login);

</script>

Js 实现登录框可拖动的更多相关文章

  1. js 拟写登录页 可以拖动登录框

    <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...

  2. 拖动登录框 HTML+CSS+js

    先上效果 代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="U ...

  3. Discuz! X2.5判断会员登录状态及外部调用注册登录框

    Discuz! X2.5判断会员登录状态及外部调用注册登录框 有关discuz论坛会员信息,收集的一些资料: 用dedecms+discuz做了个门户加论坛形式的网站,但是dedecms顶部目前只能q ...

  4. javascript实例学习之三——类新浪微博的登录框

    该登录框和百度的搜索框类似,可以实现如下效果: 1.文字输入时自动弹出提示层 2,提示层根据输入文字进行自动过滤 3,提示层可以使用上下按键进行选择 4,提示层可以点击或者回车来确认输入 微博登录框h ...

  5. phpmyadmin 4.x 版本无法看到登录框的处理

    由于个人dreamhost即将到期问题,购买了一台VPS. 配置了一个CentOS 6.4 Linux 服务器,用Nginx+php-fpm搭建的环境. 这些都是废话,下面是重点: 当搭建后配置php ...

  6. JQuery+CSS3实现封装弹出登录框效果

    原文:JQuery+CSS3实现封装弹出登录框效果 上次发了一篇使用Javascript来实现弹出层的效果,这次刚好用了JQuery来实现,所以顺便记录一下: 因为这次使用了Bootstrap来做一个 ...

  7. 第一百三十三节，JavaScript，封装库--弹出登录框

    JavaScript,封装库--弹出登录框 封装库,增加了两个方法 yuan_su_ju_zhong()方法,将获取到的区块元素居中到页面,chuang_kou_shi_jian()方法,浏览器窗口事 ...

  8. js弹窗登录效果(源码)--web前端

    1.JS弹窗登录效果 <!DOCTYPE html><html lang="en"><head> <meta charset=" ...

  9. 基于CSS3动态背景登录框代码

    基于CSS3动态背景登录框代码.这是一款基于jQuery+CSS3实现的带有动画效果的动态背景登陆框特效.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div class ...

  10. 完美解决bootstrap模态框允许拖动后拖出边界的问题

    使用bootstrap3版本 在网上看了很多方法,我觉得jquery-ui的实现方法是最简单有效的,具体实现方法 1.下载并引入jquery-ui插件 2.全局添加模态框允许拖动事件 $(docume ...

随机推荐

  1. 搭建漏洞环境及实战——搭建DVWA漏洞环境

    DVWA是一款开源的渗透测试漏洞练习平台,其中内涵XSS.SQL注入.文件上传.文件包含.CSRF和暴力破解等各个难度的测试环境. 1.在安装时需要在数据库里创建一个数据库名,进入MySQL管理中的p ...

  2. 使用浏览器inspect调试app

    使用浏览器inspect调试app 在开发混合项目的过程中,常常需要在app环境排查问题,接口可以使用fiddler等工具来抓包,但是js错误就不好抓包了,这里介绍一种调试工具-浏览器. 1.调试过程 ...

  3. avue框架 拼接后端返回的数据到table中

    根据要求展示下列详细地址情况: 后端返回的数据: 具体实现步骤: { label: "详细地址", prop: "buildingName", display: ...

  4. Elasticsearch查询及聚合类DSL语句宝典

    作者:京东科技 纪海雨 前言 随着使用es场景的增多,工作当中避免不了去使用es进行数据的存储,在数据存储到es当中以后就需要使用DSL语句进行数据的查询.聚合等操作,DSL对SE的意义就像SQL对M ...

  5. Java关键词synchronized解读

    目录 1 引入Synchronized 2 Synchronized的使用 2.1 对象锁 2.1.1 Synchronized修饰实例方法 2.1.2 Synchronized修饰代码块 2.2 类 ...

  6. Vue中实现自定义excel下载

    目录 第一种:后端生成excel 第二种:前端合成excel 总结 参考资料 最近在工作中遇到一个需求,就是需要在前端实现一个错误模板Excel的下载功能. 实现下载有两种方式,一种是后端生成一个ex ...

  7. [python] 基于wordcloud库绘制词云图

    词云Wordcloud是文本数据的一种可视化表示方式.它通过设置不同的字体大小或颜色来表现每个术语的重要性.词云在社交媒体中被广泛使用,因为它能够让读者快速感知最突出的术语.然而,词云的输出结果没有统 ...

  8. 解决xcode每次编译都需要输入用户名和密码

    MacOS:11.1 Xcode:12.3 一.打开你的 钥匙串, 如果不知道  打开你的 spotlight搜索 工具 ,输入"钥匙串" 二.登录--->iPhone de ...

  9. Java List集合排序

    二维 List 自定义排序 使用lambda表达式 import java.util.*; public class Main { public static void main(String[] a ...

  10. 真正“搞”懂HTTP协议09之这个饼干不能吃

    我们在之前的文章中介绍HTTP特性的时候聊过,HTTP是无状态的,每次聊起HTTP特性的时候,我都会回忆一下从前辉煌的日子,也就是互联网变革的初期,那时候其实HTTP不需要有状态,就是个浏览页面,没有 ...