<!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. 常用的几个在线生成网址二维码的API接口

     原创,转载请注明出处! 用接口的好处就是简单,方便,时时更新,二维码生成以后不用保存在本项目服务器上面,可以减少不必要的开支,无需下载安装什么软件,可简单方便地引用,这才是最便捷的免费网址二维码生成 ...

  2. Python 3 利用 Dlib 19.7 实现摄像头人脸识别

    0.引言 利用python开发,借助Dlib库捕获摄像头中的人脸,提取人脸特征,通过计算欧氏距离来和预存的人脸特征进行对比,达到人脸识别的目的: 可以自动从摄像头中抠取人脸图片存储到本地: 根据抠取的 ...

  3. 连接Access数据遇到的问题总览！

    由于要访问一个厂商的access数据,所以要写一个对于access的demo,相对于mysql.sqlserver来说,连接access花费了不少精力,现在将遇到的问题分享出来,以后大家遇到类似问题时 ...

  4. Spring MVC 的 XML 配置方式

    索引: 开源Spring解决方案--lm.solution 参看代码 GitHub: solution/pom.xml solution/webapi/pom.xml solution/mapper/ ...

  5. 微信二维码支付-模式一(PC端,解决中文乱码问题)

    近期公司调完银联,调支付宝,调完支付宝调微信.说实话微信的帮助文档确实是烂,而且有没有技术支持,害的我头发都掉了一桌.不说废话了,看代码. 首先登陆微信的公众平台(微信的服务号不是订阅号),然后选择微 ...

  6. PAT1079 :Total Sales of Supply Chain

    1079. Total Sales of Supply Chain (25) 时间限制 250 ms 内存限制 65536 kB 代码长度限制 16000 B 判题程序 Standard 作者 CHE ...

  7. java里的堆内存于栈内存的区别

    这个区别对于我们来说并不大,这是内存分配的两种方法.一般代码逻辑,简单变量,结构体都是放入栈中,而对象,以及被装箱的数据是放入堆中的.简单来说,栈就是一个很长的栈(数据结构中的栈,如果不理解可以当做是 ...

  8. MySQL提示“too many connections”的解决办法

    今天生产服务器上的MySQL出现了一个不算太陌生的错误"Too many connections".平常碰到这个问题,我基本上是修改/etc/my.cnf的max_connecti ...

  9. 解决Debian 9 iwlwifi固件缺失导致无法连接无线网络的问题

    本文由荒原之梦原创,原文链接:http://zhaokaifeng.com/?p=692 前言: 本文介绍了解决Debian9安装完成后无法连接wifi的问题以及一些扩展知识. 问题描述: 安装Deb ...

  10. JAVAEE——Mybatis第二天：输入和输出映射、动态sql、关联查询、Mybatis整合spring、Mybatis逆向工程

    1. 学习计划 1.输入映射和输出映射 a) 输入参数映射 b) 返回值映射 2.动态sql a) If标签 b) Where标签 c) Sql片段 d) Foreach标签 3.关联查询 a) 一对 ...