<!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. Ubuntu编译安装crtmp-server

    下载源码 从GitHub上下载:https://github.com/j0sh/crtmpserver.git 编译安装 apt-get install cmake apt-get install l ...

  2. python 要掌握面向对象，你得会做这些题吗？

    1,面向对象三大特性,各有什么用处,说说你的理解. 继承:解决代码重用问题 多态:多态性,可以在不考虑对象类型的情况下而直接使用对象 封装:明确的区分内外,控制外部对隐藏属性的操作行为,隔离复杂度 2 ...

  3. python爬虫入门（四）利用多线程爬虫

    多线程爬虫 先回顾前面学过的一些知识 1.一个cpu一次只能执行一个任务,多个cpu同时可以执行多个任务2.一个cpu一次只能执行一个进程,其它进程处于非运行状态3.进程里包含的执行单元叫线程,一个进 ...

  4. SSM-SpringMVC-28：SpringMVC类型转换之自定义日期类型转换器

     ------------吾亦无他,唯手熟尔,谦卑若愚,好学若饥------------- 例子很简易,要明白的是思路,话不多说,开讲 上篇博客不是说springmvc默认的日期转换格式是yyyy/M ...

  5. Centos下的apache2练习

    前言: 我上星期一直在写代码忘记写博客了,明天回去补回来.脚本主要用于收集信息 今天刚刚学完apache.来做个总结,写的不好请多多指指出. 目标: Centos6.5的IP:192.168.1.21 ...

  6. OOP编程七大原则

    OCP(Open-Closed Principle),开放封闭原则:软件实体应该扩展开放.修改封闭.实现:合理划分构件,一种可变性不应当散落在代码的很多角落里,而应当被封装到一个对象里:一种可变性不应 ...

  7. Python实现批量新建SecureCRT Session

    最近因为工作需要,我需要在ssh的时候保存几千台网关的session,工作量相当大(也就是ssh的时候需要记住用户名和密码,然后还要再session选项中录入enable密码,相当繁琐),而且设备的用 ...

  8. sql server导出数据结构

    http://jingyan.baidu.com/article/eae07827ad76ba1fed548573.html

  9. 电梯调度算法---SCAN算法

    请珍惜小编劳动成果,该文章为小编原创,转载请注明出处. 扫描(SCAN)调度算法:总是从磁臂当前位置开始,沿磁臂的移动方向去选择离当前磁臂最近的那个柱面的访问者.如果沿磁臂的方向无请求访问时,就改变磁 ...

  10. Linux 上一些常用命令

    切换权限: sudo chown -R 权限名: 文件 tar -zcvf 文件夹.tar 文件夹--exclude=要过滤的文件夹路径 重启crontab :service crond restar ...