<!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. Scapy的使用

    0.前言 最近现场测试项目时,突如其来需要伪造IGMP报文,骗取交换机相关组播流量,慌忙之下学习了Scapy的使用,以及相关快速学习的方法,在这里分享下. 1.Scapy库安装 github地址:ht ...

  2. PHP文件系统操作常用函数

    虽然PHP提供很多内置的文件处理函数,但是分得特别细,有一些操作需要多个函数一起使用才能达到目标,比如删除非空文件夹的所有内容,遍历文件夹等功能,下面各个函数是学习的时候整理的,有的是教程里的,有的是 ...

  3. Centos7搭建LAMP+Typecho博客

    一.安装Apache的httpd服务 yum install httpd # 安装httpd服务 systemctl start httpd # 启动httpd服务 systemctl status ...

  4. 梯度、散度、旋度、Jacobian、Hessian、Laplacian 的关系图

    转自松鼠的窝 一.入门

  5. 影响MapReduce性能的几个因素

    Hadoop MapReduce性能优化影响MapReduce输入数据处理时间的因素很多.其中之一是实现map和reduce函数时使用的算法.其他外部因素也可能影响MapReduce性能.根据我们的经 ...

  6. codeforces515B

    Drazil and His Happy Friends CodeForces - 515B Drazil有很多朋友,他们中有些人是快乐的,有些人是不快乐的. Drazil想让他的朋友变得快乐.于是, ...

  7. 最新更新的Windows 10切换蓝牙连接开关会导致蓝屏死机

    目前已经升级到 Windows 10 Version 1809 版的用户们正在努力发掘新版本还没有被公开发现的错误问题. 比如此前的.ZIP 格式的压缩包解压时无法正常替换,微软已承认该问题并称将在后 ...

  8. java 使用 WebUploader

    参考: http://blog.csdn.net/finalAmativeness/article/details/54668090 最近项目需要多文件上传. 所以使用了 baidu的 webuplo ...

  9. SpringBoot基础入门

    1.SpringBoot核心相关内容 1.1入口类 SpringBoot通常有一个入口类*Application,内部有一个main方法,是启动SpringBoot的入口.使用@SpringBootA ...

  10. JS通过键盘点击事件实现div移动

    页面内容:文本框模拟键盘点击   div元素实现移动: <body> <textarea id="myarea"></textarea> < ...