原理：先计算鼠标与拖拽目标的左侧距离 跟 上面距离，再计算拖动后的位置。

示例代码：

 <!DOCTYPE html>

 <html lang="en">

     <head>

         <title>拖拽原理</title>

         <meta charset="UTF-8">

         <meta name="viewport" content="width=device-width, initial-scale=1">

         <style type="text/css">

             #moveBlock{

                 width:100px;height:100px;background-color:#f00;position:absolute

             }

         </style>

         <script>

             window.onload = function(){

                 var oDiv = document.getElementById("moveBlock");

                 oDiv.onmousedown  = function(ev){

                     var ev = ev || event;

                     var disX = ev.clientX - this.offsetLeft; //计算鼠标与当前div左侧距离

                     var disY = ev.clientY - this.offsetTop; //计算鼠标与当前div顶侧距离

                     document.onmousemove = function(ev){

                         var ev = ev || event;

                         oDiv.style.left = ev.clientX - disX + "px";//计算拖动后与左侧的距离

                         oDiv.style.top = ev.clientY - disY + "px";//计算拖动后与顶部的距离

                     }

                     document.onmouseup = function(){

                          document.onmousemove = document.onmouseup = null;

                     }

                 }

             }

         </script>

     </head>

     <body>

         <div id="moveBlock">

         </div>

     </body>

 </html>

我们运行上面的代码如果只是一个单纯的div没什么问题，但是如果同时有文字选中之后，再拖动div会发现有问题。

那是因为当鼠标按下的时候，如果页面中有文字被选中，那么会触发浏览器默认的文字拖拽效果。

解决方案：
标准：用return false; 阻止事件默认行为
非标准ie :用setCapture()设置全局捕获,当我们给一个元素设置全局捕获以后，那么这个元素就会监听后续发生的所有事情，当有事件发生的时候，就会被当前设置了全局捕获的元素所触发。
 
setCapture()兼容性：
ie : 有，并且有效果
ff : 有，但是没效果
chorme : 没有
 
具体代码如下：
 <!DOCTYPE html>

 <html lang="en">

     <head>

         <title>拖拽改进版</title>

         <meta charset="UTF-8">

         <meta name="viewport" content="width=device-width, initial-scale=1">

         <style type="text/css">

             #moveBlock{

                 width:100px;height:100px;background-color:#f00;position:absolute

             }

         </style>

         <script>

             window.onload = function(){

                 var oDiv = document.getElementById("moveBlock");

                 oDiv.onmousedown  = function(ev){

                     var ev = ev || event;

                     var disX = ev.clientX - this.offsetLeft;

                     var disY = ev.clientY - this.offsetTop;

                     //设置全局捕获

                     if(oDiv.setCapture){

                         oDiv.setCapture();

                     }

                     document.onmousemove = function(ev){

                         var ev = ev || event;

                         oDiv.style.left = ev.clientX - disX + "px";

                         oDiv.style.top = ev.clientY - disY + "px";

                     }

                     document.onmouseup = function(){

                          document.onmousemove = document.onmouseup = null;

                          //释放事件捕获 releaseCapture();

                          if(oDiv.releaseCapture){

                             oDiv.releaseCapture();

                         }

                     }

                    return false; //阻止事件默认行为

                 }

             }

         </script>

     </head>

     <body>

         <p>

             原因：当鼠标按下的时候，如果页面中有文字被选中，那么会触发浏览器默认的文字拖拽效果。<br>

             解决： 用return false; 阻止事件默认行为.

         </p>

         <div id="moveBlock">

         </div>

     </body>

 </html>

封装成一个拖拽函数：

 <!DOCTYPE html>

 <html lang="en">

     <head>

         <title>拖拽封装</title>

         <meta charset="UTF-8">

         <meta name="viewport" content="width=device-width, initial-scale=1">

         <style type="text/css">

             #moveBlock{

                 width:100px;height:100px;background-color:#f00;position:absolute

             }

         </style>

         <script>

             window.onload = function(){

                 var oDiv = document.getElementById("moveBlock");

                 drag(oDiv);

                 function drag(obj){

                     obj.onmousedown  = function(ev){

                         var ev = ev || event;

                         var disX = ev.clientX - this.offsetLeft;

                         var disY = ev.clientY - this.offsetTop;

                         if(obj.setCapture){

                             obj.setCapture;

                         }

                         document.onmousemove = function(ev){

                             var ev = ev || event;

                             obj.style.left = ev.clientX - disX + "px";

                             obj.style.top = ev.clientY - disY + "px";

                         }

                         document.onmouseup = function(){

                             document.onmousemove = document.onmouseup = null;

                             //释放事件捕获 releaseCapture();

                             if(obj.releaseCapture){

                                 obj.releaseCapture();

                             }

                         }

                     return false; //阻止事件默认行为

                     }

                 }

             }

         </script>

     </head>

     <body>

         <p>

             原因：当鼠标按下的时候，如果页面中有文字被选中，那么会触发浏览器默认的文字拖拽效果。<br>

             解决： 用return false; 阻止事件默认行为.

         </p>

         <div id="moveBlock">

         </div>

     </body>

 </html>

js学习笔记29----拖拽的更多相关文章

  1. 纯JS Web在线可拖拽的流程设计器

    F2工作流引擎之-纯JS Web在线可拖拽的流程设计器 Web纯JS流程设计器无需编程,完全是通过鼠标拖.拉.拽的方式来完成,支持串行.并行.分支.异或分支.M取N路分支.会签.聚合.多重聚合.退回. ...

  2. js学习笔记：webpack基础入门（一）

    之前听说过webpack,今天想正式的接触一下,先跟着webpack的官方用户指南走: 在这里有: 如何安装webpack 如何使用webpack 如何使用loader 如何使用webpack的开发者 ...

  3. Vue.js学习笔记（2）vue-router

    vue中vue-router的使用:

  4. js div浮动层拖拽效果代码

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  5. JS 学习笔记--9---变量-作用域-内存相关

    JS 中变量和其它语言中变量最大的区别就是,JS 是松散型语言,决定了它只是在某一个特定时间保存某一特定的值的一个名字而已.由于在定义变量的时候不需要显示规定必须保存某种类型的值,故变量的值以及保存的 ...

  6. WebGL three.js学习笔记 使用粒子系统模拟时空隧道（虫洞）

    WebGL three.js学习笔记 使用粒子系统模拟时空隧道 本例的运行结果如图: 时空隧道demo演示 Demo地址:https://nsytsqdtn.github.io/demo/sprite ...

  7. WebGL three.js学习笔记 法向量网格材质MeshNormalMaterial的介绍和创建360度全景天空盒的方法

    WebGL学习----Three.js学习笔记(5) 点击查看demo演示 Demo地址:https://nsytsqdtn.github.io/demo/360/360 简单网格材质 MeshNor ...

  8. WebGL three.js学习笔记 创建three.js代码的基本框架

    WebGL学习----Three.js学习笔记(1) webgl介绍 WebGL是一种3D绘图协议,它把JavaScript和OpenGL ES 2.0结合在一起,通过增加OpenGL ES 2.0的 ...

  9. vue.js 学习笔记3——TypeScript

    目录 vue.js 学习笔记3--TypeScript 工具 基础类型 数组 元组 枚举 字面量 接口 类类型 类类型要素 函数 函数参数 this对象和类型 重载 迭代器 Symbol.iterat ...

  10. 2019-4-29 js学习笔记

    js学习笔记一:js数据类型   1:基本数据类型       number类型(整数,小数)      String类型          boolean类型        NaN类型其实是一个nu ...

随机推荐

  1. RabbitMQ消息队列的小伙伴: ProtoBuf（Google Protocol Buffer） [转]

    什么是ProtoBuf? 一种轻便高效的结构化数据存储格式,可以用于结构化数据串行化,或者说序列化.它很适合做数据存储或 RPC 数据交换格式.可用于通讯协议.数据存储等领域的语言无关.平台无关.可扩 ...

  2. 记一次400错误引发的血案（URL中特殊符号的转义/400 bad request错误）

    django+nginx+uwsgi部署的站点访问某个URL时发生了400 bad request的错误,而使用django自带的开发版的web server时没有遇到此问题.初步判断是nginx或u ...

  3. Win8.1设置ftp服务器并设定用户操作权限的详细教程

    http://wenku.baidu.com/link?url=VTDLnDa_yfQN9OldjVnYsOBf7UdIj76QjaLDyHP-I0A6iFEfzB8EyBf9uztwm2JDXlFL ...

  4. Report_SRW工具的基本用法（概念）

    2014-05-31 Created By BaoXinjian

  5. 云从科技 OCR任务 pixel-anchor 方法

    云从科技提出了一种端到端的深度学习文本检测框架Pixel-Anchor,通过特征共享的方式高效的把像素级别的图像语义分割和锚检测回归放入一个网络之中, 把像素分割结果转换为锚检测回归过程中的一种注意力 ...

  6. Tree通用的系列方法列表-treepanel

    在项目中经常会用到Tree来显示数据进行操作.今天整理出来一系列操作Tree的方法.可供项目中方便调用.不用重复写代码,快速应用,通用性很强. Tree系列方法列表如下:主要针对的是ext.net中的 ...

  7. 常用IP核

    前言 记录自己用到的模块,随时补充. 主要分类: 一.常用模块 1-FIFO FIFO分为两种,一是输入输出时钟相同(Common clock)的 fifo ;二是输入输出时钟不相同(Independ ...

  8. ps换衣服

    1.抠衣服->给衣服新建图层(ctrl+j)->给图层去色,让衣服边黑白色.2.剪贴蒙版(上图:大花布,下形:衣服).作用:大花布替换成衣服3.大花布图层->叠加图层样式或其它图层样 ...

  9. kvm最小磁盘大于等于5G

    上图的实验为4G(磁盘的大小) 后来磁盘大小增加到5G后,成功安装! [root@bass virhost]# virt-install --name 22cache --ram=512 --arch ...

  10. 程序挂在dynamic_cast<CCObject*>(pDelegate)->retain();

    CCTargetedTouchDelegate 的继承 和 dynamic_cast 想写个可以响应touch的sprite 类定义成了这个样子: class GemBoard : public CC ...