浅析JavaScript动画模拟拖拽原理


Posted in Javascript onDecember 09, 2016

模拟拖拽的原理:

浅析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>

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持三水点靠木!

Javascript 相关文章推荐
JavaScript 数组的 uniq 方法
Jan 23 Javascript
jQuery EasyUI API 中文文档 - PropertyGrid属性表格
Nov 18 Javascript
关于innerHTML后丢失动态绑定的EVENT问题解决方法
May 19 Javascript
new Date()问题在ie8下面的处理方法
Jul 31 Javascript
JS不能跨域借助jquery获取IP地址的方法
Aug 20 Javascript
详解Node.js中的事件机制
Sep 22 Javascript
Vue.js进行查询操作的实例详解
Aug 25 Javascript
seajs实现强制刷新本地缓存的方法分析
Oct 16 Javascript
JavaScript比较同一天的时间大小实例代码
Feb 09 Javascript
解决vue热替换失效的根本原因
Sep 19 Javascript
JS面试题大坑之隐式类型转换实例代码
Oct 14 Javascript
浅析JavaScript中的变量提升
Jun 01 Javascript
JS定时器实现数值从0到10来回变化
Dec 09 #Javascript
原生js实现查询天气小应用
Dec 09 #Javascript
JS实现太极旋转思路分析
Dec 09 #Javascript
学习使用bootstrap的modal和carousel
Dec 09 #Javascript
PHP+jquery+ajax实现分页
Dec 09 #Javascript
javascript垃圾收集机制的原理分析
Dec 08 #Javascript
基于JS实现的随机数字抽签实例
Dec 08 #Javascript
You might like
解析如何修改phpmyadmin中的默认登陆超时时间
2013/06/25 PHP
php mysql_real_escape_string函数用法与实例教程
2013/09/30 PHP
php截取html字符串及自动补全html标签的方法
2015/01/15 PHP
PHP设计模式入门之状态模式原理与实现方法分析
2020/04/26 PHP
Function.prototype.call.apply结合用法分析示例
2013/07/03 Javascript
JS批量修改PS中图层名称的方法
2014/01/26 Javascript
js判断游览器类型及版本号的代码
2014/05/11 Javascript
一不小心就做错的JS闭包面试题
2015/11/25 Javascript
JavaScript知识点总结(十一)之js中的Object类详解
2016/05/31 Javascript
JavaScript SHA-256加密算法详细代码
2016/10/06 Javascript
基于jQuery Easyui实现登陆框界面
2017/07/10 jQuery
JavaScript编写棋盘覆盖代码详解
2017/08/28 Javascript
详解VueRouter进阶之导航钩子和路由元信息
2017/09/13 Javascript
JavaScript实现精美个性导航栏筋斗云效果
2017/10/29 Javascript
vue-router history模式下的微信分享小结
2018/07/05 Javascript
使用node.js实现微信小程序实时聊天功能
2018/08/13 Javascript
JS中间件设计模式的深入探讨与实例分析
2020/04/11 Javascript
如何在Vue中使localStorage具有响应式(思想实验)
2020/07/14 Javascript
修改NPM全局模式的默认安装路径的方法
2020/12/15 Javascript
python单线程实现多个定时器示例
2014/03/30 Python
python多线程操作实例
2014/11/21 Python
朴素贝叶斯Python实例及解析
2018/11/19 Python
python pygame实现五子棋小游戏
2020/10/26 Python
在tensorflow中实现屏蔽输出的log信息
2020/02/04 Python
详解Django配置JWT认证方式
2020/05/09 Python
Python while true实现爬虫定时任务
2020/06/08 Python
Python 利用OpenCV给照片换底色的示例代码
2020/08/03 Python
Python实现列表索引批量删除的5种方法
2020/11/16 Python
python基于opencv实现人脸识别
2021/01/04 Python
英国探险旅游专家:Explore
2018/12/20 全球购物
哈萨克斯坦移动和数字技术在线商店:SatelOnline.kz
2020/09/04 全球购物
科技工作者先进事迹
2014/08/16 职场文书
魂断蓝桥观后感
2015/06/10 职场文书
房产证明范本
2015/06/19 职场文书
简短的36句中秋节祝福信息语句
2019/09/09 职场文书
php微信小程序解包过程实例详解
2021/03/31 PHP