<!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 media="screen">

         * {

             margin: 0;

             padding: 0;

         }

         .nav {

             height: 30px;

             background-color: lemonchiffon;

             line-height: 30px;

             padding-left: 30px;

         }

         .nav a {

             text-align: center;

             font-size: 14px;

             text-decoration: none;

             color: #000;

         }

         .d-box {

             width: 400px;

             height: 300px;

             border: 5px solid #ccc;

             box-shadow: 2px #666;

             position: absolute;

             top: 40%;

             left: 40%;

         }

         .hd {

             width: 100%;

             height: 25px;

             background-color: #777;

             line-height: 25px;

             color: #fff;

             cursor: move;

         }

         #box_close {

             float: right;

             cursor: pointer;

         }

     </style>

 </head>

 <body>

     <!-- 顶部注册信息 -->

     <div class="nav">

         <a href="javascript:;" id="register">注册信息</a>

     </div>

     <!-- 可以移动的对话框 -->

     <div class="d-box" id="d_box">

         <div class="hd" id="drop">

             <i>注册信息 (可以拖拽)</i>

             <span id="box_close">【关闭】</span>

         </div>

         <div class="bd"></div>

     </div>

     <script src="animate.js" charset="utf-8"></script>

     <script type="text/javascript">

         var box = document.getElementById("d_box");

         var drop = document.getElementById("drop");

         //先按下，在移动触动此事件

         drop.onmousedown = function(event){

             //获取鼠标在盒子中的坐标，将来移动的时候减去保证鼠标在盒子的指定位置

             event = event || window.event;

             var pagex = event.pageX || scroll().left + event.clientX;

             var pagey = event.pageY || scroll().top + event.clientY;

             var x = pagex - box.offsetLeft;

             var y = pagey - box.offsetTop;

             document.onmousemove = function(event){

                 //把鼠标的坐标赋值给对话框。

                 event = event || window.event;

                 var xx = event.pageX || scroll().left + event.clientX;

                 var yy = event.pageY || scroll().top + event.clientY;

                 //二次操作鼠标位置

                 targetx = xx - x;

                 targety = yy - y;

                 //给box赋值

                 box.style.left = targetx + "px";

                 box.style.top = targety + "px";

                 //禁止文本选中（选中后取消）

                 window.getSelection ? window.getSelection().removeAllRanges() : document.selection.empty();

             }

         }

         //事件解绑

         drop.onmouseup = function(){

             document.onmousemove = null;

         }

     </script>

 </body>

 </html>

javascript 拖拽事件的更多相关文章

  1. day52—JavaScript拖拽事件的应用（自定义滚动条）

    转行学开发,代码100天——2018-05-07 前面的记录里展示了JavaScript中鼠标拖拽功能,今天利用拖拽功能实现另一个应用场景——自定义滚动条(作为控制器)的用法. 常通过自定义滚动条控制 ...

  2. 每日分享！～ JavaScript(拖拽事件）

    浏览器的拖拉事件 拖拉(drag)指的是,用户在某个对象上按下鼠标键不放,拖动它到另一个位置,然后释放鼠标键,将该对象放在那里. 拖拉的对象有好几种,包括元素节点.图片.链接.选中的文字等等.在网页中 ...

  3. javascript拖拽事件

    <!DOCTYPE html> <html> <head> <title></title> <style type="tex ...

  4. day50—JavaScript鼠标拖拽事件

    转行学开发,代码100天——2018-05-05 今天通过鼠标拖拽事件复习巩固一下鼠标事件. 鼠标拖拽事件需要记住两点: 1.距离不变 2.鼠标事件(按下,移动,抬起) <div id=&quo ...

  5. html5拖拽事件 xhr2 实现文件上传 含进度条

    <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...

  6. Javascript 拖拽的一些高级的应用——逐行分析代码，让你轻松了解拖拽的原理

    我们看看之前的拖拽在周围有东西的时候会出现什么问题? 在高级浏览器中不会有啥问题,我们放到IE7下面测试一下,问题就出来了.如图 我们可以很清楚的看到,文字都已经被选中了.那这个用户体验很不好,用起来 ...

  7. Javascript 拖拽的一些简单的应用——逐行分析代码，让你轻松了解拖拽的原理

    今天我们来看看如何让拖拽的物体不能拖出某个div之外和拖拽的吸附功能 上次讲到我们的拖拽是不可拖出可视区范围的,在这基础上我们加个父级的div,不让他拖出父级.原理和之前的一样,简单吧. <di ...

  8. Javascript 拖拽雏形中的一些问题——逐行分析代码，让你轻松了解拖拽的原理

    今天我们就来解决上一次拖拽雏形中的一些问题.下面看看有哪些问题? 附上上期的Javascript代码,方便大家查看问题. <script type="text/javascript&q ...

  9. 完美实现鼠标拖拽事件，解决各种小bug，基于jquery

    鼠标拖拽事件是web中使用频率极高的事件,之前写过的代码包括网上的代码,总存在各种各样的问题,包括拖拽体验差,松开鼠标后拖拽效果仍存在以及代码冗余过大等 本次我才用jQuery实现一个尽可能高效的拖拽 ...

随机推荐

  1. 无限级结构SQL查询所有的下级和所有的下级

    Id,PId无限级结构,查询某个Id的所有下级或所有上级,使用WITH AS查询 查找Id为1所有的下级 /*查找Id为1所有的下级*/ WITH T AS( SELECT Id,PId,Name,0 ...

  2. socket.io框架

    socket.io框架 一.问题背景 目前公司在互联网产品上需要程序与前端部分要进行一个实时交互,在进行一定程度上的选型后,决定使用socket.io框架进行一个实践,算是公司的一个新的 尝试,也算是 ...

  3. SQLServer：介质簇计数 缺失的介质簇序列号

    https://shiyousan.com/post/635886596017415485 http://www.cnblogs.com/yc-755909659/p/3725940.html 错误描 ...

  4. Linux 4.20内核得到更新，英特尔CPU 性能降低50%

    根据HKEPC的报道,Linux近日发布了 4.20 内核的一些漏洞修复更新,更新后可能会出现50% 的性能损失,是今年内所有安装Spectre/Meltdown 修补程式中效能跌幅最大的一次. 据报 ...

  5. ACM-ICPC 2018 焦作赛区网络预赛 E Jiu Yuan Wants to Eat (树链剖分+线段树）

    题目链接:https://nanti.jisuanke.com/t/31714 题意:给你一棵树,初始全为0,有四种操作: 1.u-v乘x    2.u-v加x   3. u-v取反  4.询问u-v ...

  6. python构建bp神经网络_曲线拟合(一个隐藏层)__2.代码实现

    IDE:jupyter 抽象程度可能不是那么高,以后再优化. 理论和代码实现的差距还是挺大的 数据集请查看 python构建bp神经网络(一个隐藏层)__1.数据可视化 部分代码预览 git上传.ip ...

  7. Dominator Tree & Lengauer-Tarjan Algorithm

    问题描述 给出一张有向图,可能存在环,对于所有的i,求出从1号点到i点的所有路径上的必经点集合. 什么是支配树 两个简单的小性质—— 1.如果i是j的必经点,而j又是k的必经点,则i也是k的必经点. ...

  8. [luogu4403][bzoj1271][BJWC2008]秦腾与教学评估

    题目描述 在秦腾进入北京大学学习的第一个学期,就不幸遇到了前所未有的教学评估.在教学评估期间,同学们被要求八点起床,十一点回宿舍睡觉,不准旷课,上课不准迟到,上课不准睡觉--甚至连著名的北大三角地也在 ...

  9. Powershell script to install Windows Updates (msu) from folder

    ######################################################### # # Name: InstallWindowsUpdates.ps1 # Auth ...

  10. python测试webservice接口

    1.下载库:https://pypi.python.org/pypi/suds-jurko 2.解压后,进入到解压目录,安装库:python3 setup.py install 3.测试获取手机归属地 ...