浅析JavaScript动画模拟拖拽原理

更新时间：2016年12月09日 09:00:10 作者：老板丶鱼丸粗面

本文主要对JavaScript动画模拟拖拽原理进行分析，步骤清晰，简短的文字，深入的理解。需要的朋友可以看下

模拟拖拽的原理：

x1等于div.offsetLeft

y1等于div.offsetTop

x2等于ev.clientX(ev表示event事件)

y2等于ev.clientY

当我们在方块上按下鼠标的时候，x2-x1即可确定。移动鼠标之后，我们用鼠标当前的位置即x4、y4减去x2-x1、y2-y1就可以得到方块现在的位置。

代码：

 <!DOCTYPE html>
 <html lang="en">
 <head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
   #box{
    width: 100px;
    height: 100px;
    background: red;
   position: absolute;
   }
  </style>
 </head>
 <body>  
  <div id="box"></div>
  <script type="text/javascript">
  var oBox = document.getElementById('box');
  oBox.onmousedown = function(ev){
  // 鼠标按下 
  var ev = ev || event; 
  // 获取鼠标离div得距离
  var mouseBoxleft = ev.clientX - this.offsetLeft;
  var mouseBoxTop = ev.clientY - this.offsetTop; 
  oBox.onmousemove = function(ev){
   // 鼠标按下左键并移动 
  var ev = ev || event; 
   // 设置div移动时，它的位置
   oBox.style.left = ev.clientX - mouseBoxleft + 'px';
   oBox.style.top = ev.clientY - mouseBoxleft + 'px';
   }
   oBox.onmouseup = function(){
   // 鼠标左键抬起 
   oBox.onmousemove = oBox.onmouseup = null;
   }
  }
  </script>
 </body>
 </html>

优化代码：

【1】鼠标移动快的时候，鼠标会移出方块，这时方块就不会再跟随鼠标动了。

解决办法：就是将onmousemove和onmouseup加到document对象上

代码：

 <!DOCTYPE html>
 <html lang="en">
 <head>
  <meta charset="UTF-8">
 <title>Document</title>
  <style>
   #box{
   width: 100px;
    height: 100px;
   background: red;
    position: absolute;
   }
  </style>
 </head>
 <body>  
  <div id="box"></div>
  <script>
 var oBox = document.getElementById('box'); 
 oBox.onmousedown = function(ev){
  // 鼠标按下 
  var ev = ev || event; 
  // 获取鼠标离div得距离
  var mouseBoxleft = ev.clientX - this.offsetLeft;
  var mouseBoxTop = ev.clientY - this.offsetTop; 
  document.onmousemove = function(ev){
  // 鼠标按下左键并移动  
   var ev = ev || event; 
   // 设置div移动时，它的位置
   oBox.style.left = ev.clientX - mouseBoxleft + 'px';
   oBox.style.top = ev.clientY - mouseBoxleft + 'px'; 
   } 
   document.onmouseup = function(){
   // 鼠标左键抬起  
   document.onmousemove = document.onmouseup = null;
   }
  }
  </script>
 </body>
 </html>

【2】当要拖动的方块中有文字时会触发浏览器的默认行为

　解决办法：1、使用return false添加到onmousedown事件中阻止浏览器的默认行为（IE除外）

　　　　　　 2、使用全局捕获（IE）

1、使用return false添加到onmousedown事件中阻止浏览器的默认行为（IE除外）

代码：

 <!DOCTYPE html>
 <html lang="en">
 <head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
   #box{
    width: 100px;
    height: 100px;
    background: red;
    position: absolute;
    top: 0;
    left: 0;
  }
 </style>
 </head>
 <body>  
  <div id="box">模拟拖拽</div>
  <script>
 var oBox = document.getElementById('box');
 oBox.onmousedown = function(ev){
   // 鼠标按下
   var ev = ev || event;
   // 获取鼠标离div得距离
   var mouseBoxleft = ev.clientX - this.offsetLeft;
   var mouseBoxTop = ev.clientY - this.offsetTop;
   document.onmousemove = function(ev){
   // 鼠标按下左键并移动 
    var ev = ev || event;
    // 设置div移动时，它的位置
    oBox.style.left = ev.clientX - mouseBoxleft + 'px';
    oBox.style.top = ev.clientY - mouseBoxleft + 'px';
   }
   document.onmouseup = function(){
  // 鼠标左键抬起 
   document.onmousemove = document.onmouseup = null;
  }
   // 阻止默认行为
   return false;
  }
  </script>
 </body>
 </html>

2、使用全局捕获（IE）

　全局捕获：当我们给一个元素这只全局捕获后，改元素会监听后续发生的所有事件，当有事件发生的时候就会触发改元素的事件

代码：

 <!DOCTYPE html>
 <html lang="en">
 <head>
  <meta charset="UTF-8">
  <title>Document</title>
 </head>
 <body>
  <input type="button" id="button1" value="弹出1" />
  <input type="button" id="button2" value="弹出2" />
  <script type="text/javascript">
  window.onload = function(){
  var Btn1 = document.getElementById('button1');
   var Btn2 = document.getElementById('button2'); 
   Btn1.setCapture(); 
   Btn1.onclick = function(){
    alert(1);
  }
   Btn2.onclick = function(){
   alert(2);
  }
 }
 </script>
 </body>
</html>

给Btn1设置了全局捕获之后，即使我们点击了Btn2还是会触发Btn1的点击事件

在模拟拖拽中，给要拖拽的方块onmousedown添加全局捕获然后再onmouseup中取消全局捕获

代码：

 <!DOCTYPE html>
 <html lang="en">
 <head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
  #box{
    width: 100px;
    height: 100px;
    background: red;
    position: absolute;
  }
  </style>
</head>
 <body>  
  <div id="box">模拟拖拽</div>
  <script>
 var oBox = document.getElementById('box');
  oBox.onmousedown = function(ev){
  // 鼠标按下 
   var ev = ev || event;
  // 获取鼠标离div得距离
   var mouseBoxleft = ev.clientX - this.offsetLeft;
   var mouseBoxTop = ev.clientY - this.offsetTop;
   // IE浏览器，全局捕获
   if(oBox.setCapture){
   oBox.setCapture();
   }
   document.onmousemove = function(ev){
  // 鼠标按下左键并移动 
    var ev = ev || event;
    // 设置div移动时，它的位置
    oBox.style.left = ev.clientX - mouseBoxleft + 'px';
    oBox.style.top = ev.clientY - mouseBoxleft + 'px';
   }
   document.onmouseup = function(){
   // 鼠标左键抬起 
    document.onmousemove = document.onmouseup = null;
    //IE下，释放全局捕获 releaseCapture();
   if ( oBox.releaseCapture ) {
     oBox.releaseCapture();
    }
   }
   // 阻止默认行为
   return false;
  }
  </script>
 </body>
 </html>

【3】封装模拟拖拽函数

　代码：

 <!DOCTYPE html>
 <html lang="en">
 <head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
   #box{
    width: 100px;
    height: 100px;
    background: red;
    position: absolute;
   }
  </style>
 </head>
 <body>
  <div id="box">模拟拖拽</div>
  <script>
  var oBox = document.getElementById('box');
  drag(oBox);
  function drag(obj){
   obj.onmousedown = function(ev){
    // 鼠标按下
   var ev = ev || event;
    // 获取鼠标离div得距离
    var mouseBoxleft = ev.clientX - this.offsetLeft;
    var mouseBoxTop = ev.clientY - this.offsetTop;
    // IE浏览器，全局捕获
    if(obj.setCapture){
     obj.setCapture();
    }
    document.onmousemove = function(ev){
    // 鼠标按下左键并移动 
     var ev = ev || event;
     // 设置div移动时，它的位置
     obj.style.left = ev.clientX - mouseBoxleft + 'px';
     obj.style.top = ev.clientY - mouseBoxleft + 'px';
    }
    document.onmouseup = function(){
    // 鼠标左键抬起 
     document.onmousemove = document.onmouseup = null;
    //IE下，释放全局捕获 releaseCapture();
     if ( obj.releaseCapture ) {
      obj.releaseCapture();
    }
    }
    // 阻止默认行为
    return false;
  }
 }
  </script>
 </body>
</html>

以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持脚本之家！

您可能感兴趣的文章:

关于JS中setTimeout()无法调用带参函数问题的解决方法
这篇文章主要介绍了关于JS中setTimeout()无法调用带参函数问题的解决方法,提供了2种解决方法供大家对比参考,需要的朋友可以参考下
2016-06-06
详解JavaScript正则表达式之分组匹配及反向引用
这篇文章主要介绍了详解JavaScript正则表达式之分组匹配及反向引用的相关资料,需要的朋友可以参考下
2016-03-03
Javascript中匿名函数的调用与写法实例详解(多种)
js中定义函数的方式有很多种，函数直接量就是其中一种，下面通过本文给大家介绍匿名函数是如何调用的及匿名函数的n中写法，对js匿名函数调用，js匿名函数写法相关知识感兴趣的朋友一起学习吧
2016-01-01
javascript Array对象使用小结
数组是一段线性分配的内存，它通过整数去计算偏移并访问其中的元素。数组是很快的数据结构，但不幸的是，Javascript并没有像这种数组一样的数据结构。
2009-12-12
原生JS实现简单的倒计时功能示例
这篇文章主要介绍了原生JS实现简单的倒计时功能,涉及javascript基于定时器的日期时间运算与页面元素属性动态修改相关操作技巧,需要的朋友可以参考下
2018-08-08
如何使用JS在HTML中自定义字符串格式化
在JavaScript中虽没有类似的方法，但我们可以利用字符串的replace方法自定义字符串的格式化方法。下面通过本文给大家分享使用JS在HTML中自定义字符串格式化的方法，需要的的朋友参考下吧
2017-07-07
浅谈Javascript数组(推荐)
数组，即Array类型，是开发中最常用的类型之一。这篇文章主要介绍了浅谈Javascript数组的相关资料,需要的朋友可以参考下
2016-05-05
微信小程序跨页面数据传递事件响应实现过程解析
这篇文章主要介绍了微信小程序跨页面数据传递事件响应实现过程解析,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
2019-12-12
JS清除字符串中重复值的实现方法
这篇文章主要介绍了JS清除字符串中重复值的实现方法,涉及javascript数组与字符串的遍历、比较及数学运算相关技巧,需要的朋友可以参考下
2016-08-08
js微信分享实现代码
这篇文章主要为大家详细介绍了js微信分享的实现代码，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2017-08-08