<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

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

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

  <title>Document</title>

  <style>

    * {margin: 0; padding: 0; }

    body, textarea, select, input, button {font-size: 12px; color: #fff; font-family: Arial, Helvetica, sans-serif; -webkit-text-size-adjust: none;}

    .fl-l{float: left;}

    .fl-r{float: right;}

    #dialog{

      position: absolute;

      top: 200px;

      left: 400px;

      width: 400px;

      height: 200px;

      background-color: #eaf6db;

      border: 1px solid lightslategray;

    }

    .dialog-title{

      height: 40px;

      line-height: 40px;

      background-color: #3a3333;

      cursor: move;

    }

    .login, .close{

      display: inline-block;

      margin: 0 15px;

    }

  </style>

</head>

<body>

  <div id="dialog">

    <div id="dialog-title" class="dialog-title">

      <span class="fl-l login">登录</span>

      <span class="fl-r close">X</span>

    </div>

  </div>

  <script>

    // 获取DOM元素

    var dialogTitle = document.getElementById('dialog-title')

    var dialog = document.getElementById('dialog')

    // 初始化鼠标默认位置

    var disX = 0, disY = 0

    // 添加鼠标按下事件

    dialogTitle.onmousedown = function(e) {

      var e = e || event

      // 计算鼠标距离弹出框内的位置

      disX = e.clientX - dialog.offsetLeft          // 鼠标相对于浏览器窗口左上角的横向距离 - 弹出框距离页面左上角的横向偏移距离

      disY = e.clientY - dialog.offsetTop           // 鼠标相对于浏览器窗口左上角的纵向距离 - 弹出框距离页面左上角的纵向偏移距离

      // 点击弹出框后拖动鼠标，移动弹出框

      document.onmousemove = function(e) {

        var e = e || event

        // 弹出框dialog距离窗口左上角的水平和纵向距离

        var currentDialogDisX = e.clientX - disX

        var currentDialogDisY = e.clientY - disY

        if(currentDialogDisX < 0) { // 弹出框紧贴窗口左边的情况

          currentDialogDisX = 0

        } else if(currentDialogDisX > document.documentElement.clientWidth - dialog.offsetWidth) { // 弹出框紧贴窗口右边的情况

          currentDialogDisX = document.documentElement.clientWidth - dialog.offsetWidth

        }

        if(currentDialogDisY < 0) { // 弹出框紧贴窗口上边的情况

          currentDialogDisY = 0

        } else if(currentDialogDisY > document.documentElement.clientHeight - dialog.offsetHeight) { // 弹出框紧贴窗口下边的情况

          currentDialogDisY = document.documentElement.clientHeight - dialog.offsetHeight

        }

        // 当鼠标移动时改变弹出框的位置

        dialog.style.left = currentDialogDisX + 'px'

        dialog.style.top = currentDialogDisY + 'px'

      }

      // 当点击鼠标拖动弹出框，抬起鼠标时

      document.onmouseup = function() {

        // 清除弹出框的移动事件及本身

        document.onmousemove = null

        document.onmouseup = null

      }

      // 阻止默认事件，如果不加这个阻止默认事件，在 firefox 下会有一个获取焦点的光标一直在闪动，在3.0及以下会出现拖动出现重影的情况

      return false

    }

  </script>

</body>

</html>

JavaScript实现登录窗口的拖拽的更多相关文章

  1. 第一百三十七节，JavaScript，封装库---修缮拖拽

    JavaScript,封装库---修缮拖拽 修缮拖拽 /** tuo_zhuai()方法,将一个弹窗元素实现拖拽功能 * 注意:有参设置拖拽点区块,只有弹窗的这个拖拽点区块才能拖拽,无参整个弹窗可以拖 ...

  2. Javascript 事件对象进阶（二）拖拽的应用 - 登录框的拖拽

    <!doctype html> <html> <head> <meta charset="utf-8"> <title> ...

  3. JavaScript实现最简单的拖拽效果

    一.一些无关痛痒的唠叨 拖拽还是挺不错的一个页面效果,我个人认为,其生命力在于可以让用户自己做一些操作,所谓自定义.例如: ①浏览器标签顺序的拖拽切换 现在基本上所有的选项卡式的浏览器都有顺序拖拽切换 ...

  4. WPF.UIShell UIFramework之自定义窗口的深度技术 - 模态闪动(Blink)、窗口四边拖拽支持（WmNCHitTest）、自定义最大化位置和大小（WmGetMinMaxInfo）

    无论是在工作和学习中使用WPF时,我们通常都会接触到CustomControl,今天我们就CustomWindow之后的一些边角技术进行探讨和剖析. 窗口(对话框)模态闪动(Blink) 自定义窗口的 ...

  5. 原生JS实现弹出窗口的拖拽

    上一篇说了一下弹出窗口功能的实现思路,一般情况下紧接着就会需要做到弹窗的移动,当然现在有很插件.库比如hammer可以使用,效率也非常好.但我觉得还是有必要了解一下原生JS的实现思路及方式,如下: 思 ...

  6. Qt-网易云音乐界面实现-1 窗口隐藏拖拽移动，自定义标题栏

    最近也换了公司,也换了新的工作,工资也象征性的涨了一点点,但是最近心里还是慌慌,不知道为什么,没有那种踏实感,感觉自己随时可以被抛弃的感觉.感觉自己在荒废时间,也感觉自己在浪费生命. 为了让自己在被抛 ...

  7. JavaScript实现网页元素的拖拽效果

    以下的页面中放了两个div,能够通过鼠标拖拽这两个元素到任何位置. watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvamFja2ZydWVk/font/5a6 ...

  8. electron关于无边框窗口无法拖拽移动以及点击事件失效的问题

    为了使窗口无边框,使得在某些时候让项目看起来更美观,所以在创建窗口的时候通过设置 frame 属性的值为 false 来创建无边框窗口.但是无边框窗口会产生无法移动的问题,对于这个问题我们可以在渲染进 ...

  9. javascript事件类型之界面拖拽交互

    一.在线DEMO 界面拖拽交互

随机推荐

  1. 最详细的JavaWeb开发基础之java环境搭建(Windows版)

    阅读文本大概需要 3 分钟. 首先欢迎大家来学习JavaWeb,在这里会给你比较详细的教程,从最基本的开始,循序渐进的深入.会让初学者的你少踩很多坑(大实话),如果你已经掌握了JavaWeb开发的基础 ...

  2. vue技术分享-你可能不知道的7个秘密

    前言 本文是vue源码贡献值Chris Fritz在公共场合的一场分享,觉得分享里面有不少东西值得借鉴,虽然有些内容我在工作中也是这么做的,还是把大神的ppt在这里翻译一下,希望给朋友带来一些帮助. ...

  3. getopts的使用

    getopts的使用 语法格式:getopts [option[:]] [DESCPRITION] VARIABLE option:表示为某个脚本可以使用的选项 ":":如果某个选 ...

  4. capwap学习笔记——初识capwap（二）（转）

    2.5.1 AC发现机制 WTP使用AC发现机制来得知哪些AC是可用的,决定最佳的AC来建立CAPWAP连接. WTP的发现过程是可选的.如果在WTP上静态配置了AC,那么WTP并不需要完成AC的发现 ...

  5. 数据结构 之 并查集（Disjoint Set）

    一.并查集的概念:     首先,为了引出并查集,先介绍几个概念:     1.等价关系(Equivalent Relation)     自反性.对称性.传递性.     如果a和b存在等价关系,记 ...

  6. Flask开发微电影网站(二)

    1.安装数据库连接依赖包 pip install flask-sqlalchemy 2.创建movie数据库 在CentOS虚拟机,进入MaridDB数据库提示符,创建movie数据库 create ...

  7. python 3 中的raw_input 报错

    raw_input() was renamed to input()

  8. 【转】linux系统中如何进入退出vim编辑器，方法及区别

    在linux家族中,vim编辑器是系统自带的文本编辑器,其功能强大自不必说了. 偶有小白,刚接触linux,要修改某个文本文件,不可能像WINDOWS那样操作,更有甚者,进入VI编辑器后,无法退出以致 ...

  9. ViewDragHelper实战 自己打造Drawerlayout

    转载请标明出处: http://blog.csdn.net/lmj623565791/article/details/47396187: 本文出自:[张鸿洋的博客] 一.概述 中间拖了蛮长时间了,在上 ...

  10. hibernate入门-基本配置及简单的crud操作

    框架来说主要是需要写大量的配置文件,hibernate相比mybatis来说更强大,移植性更好: 1.类和数据库的映射配置:配置文件命名一般--类名.hbm.xml (user.hbm.xml),与实 ...