<!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. 常用域名记录解释：A记录、MX记录、CNAME记录、TXT记录、AAAA记录、NS记录

    A记录 A记录是用来创建到IP地址的记录. A记录设置技巧 1.如果想创建不带www的记录,即ezloo.com,在主机记录中填写@或者留空,不同的注册商可能不一样. 2.创建多个域名到同一个IP,比 ...

  2. .net 弹出消息框后，页面样式变乱

    点击按钮,执行提交操作,弹出消息框后,页面的样式变乱,解决方法: 首先,确定使用的css样式正确,页面中的宽高值保持规范统一: 然后,弹出框避免使用Response.Write(),如下所示 Resp ...

  3. Django rest framework（7）----分页

    目录 Django rest framework(1)----认证 Django rest framework(2)----权限 Django rest framework(3)----节流 Djan ...

  4. android获取手机机型、厂商、deviceID基本信息

    /** * 系统工具类 */ public class SystemUtil { /** * 获取当前手机系统语言. * * @return 返回当前系统语言.例如:当前设置的是"中文-中国 ...

  5. HTTP协议、Ajax请求

    今天这篇文章呢,主要讲的就是关于HTTP协议.Ajax请求以及一些相关的小知识点.虽然内容不算多,可是是很重点的东西~ HTTP协议 1. http:超文本传输协议.简单.快速.灵活.无状态.无连接. ...

  6. SQL Server性能优化（8）堆表结构介绍

    一.表结构综述 下图是SQL Server中表的组织形式(其中分区1.分区2是为了便于管理,把表进行分区,放到不同的硬盘数据文件里.默认情况下,表只有一个分区.).表在硬盘上的存放形式,有堆和B树两种 ...

  7. Spring Cloud微服务系统下的数据一致性探讨

    我想这个问题需要根据自己的系统具体架构来分别讨论,这边拿一个车联网的系统举例. 拆除GPS这个功能接口需要分几个步骤实现(不涉及数据更新的步骤略去了): ①更改GPS设备状态(设备管理服务) ②更改工 ...

  8. IDEA无法创建类，接口

    原因:模板丢失 解决方案: 在idea.exe.vmoptions 或 idea64.exe.vmoptions中加入配置-Djdk.util.zip.ensureTrailingSlash=fals ...

  9. thinkphp 自动生成模块目录结构

    要达到的目的 在application目录下创建自定义模块如admin,用命令行方式自动创建该目录及目录下默认结构 要运行的命令 > php think build --module admin ...

  10. Linux网络简介

    Linux的网络简介 1.TCP/IP协议簇  (通俗的解释就是为了网路传输指定的一种标准),它将网络划分为四层:应用层 .传输层.互联层 .网络接口层 . 基础层是网络接口层(说白了就是把帧格式的数 ...