<!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. Django测试脚本-单表操作(增删改查)-必知必会13条-神奇的双下划线

    目录 一:Django测试脚本 1.测试环境准备 2.tests.py 3.models.py 4.切换MySQL数据库 二:单表操作 1.pk关键字与get关键字 2.增 3.删 4.修 三:必知必 ...

  2. 在Windows服务器安装禅道

    1.服务器上 浏览器打开禅道官网:https://www.zentao.net/ 2.下载禅道版本,这里安装的是开源版 3.下载完成之后,一键安装 安装完成之后,即可访问:

  3. 8个Spring事务失效的场景，你碰到过几种？

    前言 作为Java开发工程师,相信大家对Spring种事务的使用并不陌生.但是你可能只是停留在基础的使用层面上,在遇到一些比较特殊的场景,事务可能没有生效,直接在生产上暴露了,这可能就会导致比较严重的 ...

  4. css实习滤镜效果（背景图模糊）

    模糊实例 图片使用高斯模糊效果: img { -webkit-filter: blur(5px); /* Chrome, Safari, Opera */ filter: blur(5px); } c ...

  5. pythonfloat优雅的四舍五入

    开发中经常会有float四舍五入转int的需求,先看看浮点数直接转int的情形:无论如何float直接转int都不会四舍五入,而是直接抹去小数点. 这个需求很简单,实现也很简单,看过网友的实现,都不够 ...

  6. 第二章 --------------------XAML基础

    1.XAML是什么? XAML是扩展标记语言,是为了方便设计人员设计UI界面.具体关于XAML语法的讲解参考其他相关书籍.  XAML每一个标签以<>开头,以</>结尾,作为标 ...

  7. 2022年8月20，第一组，周鹏，从1到m中随机取n个数，n<=m，显示出所有取法

    static Random a1 =new Random(); static int m = a1.nextInt(20)+1;//随机取一个1到20的值 static int n = a1.next ...

  8. 基于MongoDb的事件订阅实现hook监听

    详情请参考原文:-- 基于MongoDb的事件订阅实现hook监听(insert,update,remove,find等事件开始,事件成功等)

  9. python之路 57 linux 基础 命令与执行效果

    虚拟环境的安装与配置 1.VMware软件安装 这里有一个15版本和一个16版本的 链接:https://pan.baidu.com/s/1vkNxxQ6NS9q7XYJ6qiVMaQ 提取码:t3l ...

  10. Java 进阶P-4.2+P-4.3

    继承 什么是继承:通俗易懂就好像是你继承你了爸的财产,其中你是子类,你爸是父类继承在Java中被称为面向对象的三大的特征,其中他表示的是,从已有的类中派生出新的类,新的类拥有了父类中属性和方法(pri ...