浅析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 相关文章推荐
Prototype使用指南之string.js
Jan 10 Javascript
图片自动缩小 点击放大
Jul 07 Javascript
Javascript 页面模板化很多人没有使用过的方法
Jun 05 Javascript
node在两个div之间移动,用ztree实现
Mar 06 Javascript
图解js图片轮播效果
Dec 20 Javascript
jQuery改变form表单的action,并进行提交的实现代码
May 25 Javascript
JS中判断字符串中出现次数最多的字符及出现的次数的简单实例
Jun 03 Javascript
基于JS代码实现导航条弹出式悬浮菜单
Jun 17 Javascript
AngularJS Ajax详解及示例代码
Aug 17 Javascript
利用jQuery来动态为属性添加或者删除属性的简单方法
Dec 02 Javascript
vue单页应用加百度统计代码(亲测有效)
Jan 31 Javascript
Vue ElementUI实现:限制输入框只能输入正整数的问题
Jul 31 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
重量级动漫纷纷停播!唯独OVERLORD第四季正在英魂之刃继续更新
2020/05/06 日漫
实时抓取YAHOO股票报价的代码
2006/10/09 PHP
php中str_pad()函数用法分析
2017/03/28 PHP
PHP使用PDO调用mssql存储过程的方法示例
2017/10/07 PHP
PHP命名空间定义与用法实例分析
2019/08/14 PHP
js 方法实现返回多个数据的代码
2009/04/30 Javascript
jQuery插件 tabBox实现代码
2010/02/09 Javascript
JavaScript中匿名、命名函数的性能测试
2014/09/04 Javascript
详解js中构造流程图的核心技术JsPlumb
2015/12/08 Javascript
js流动式效果显示当前系统时间
2016/05/16 Javascript
AngularJS使用ng-Cloak阻止初始化闪烁问题的方法
2016/11/03 Javascript
javascript实现将数字转成千分位的方法小结【5种方式】
2016/12/11 Javascript
如何利用JQuery实现从底部回到顶部的功能
2016/12/27 Javascript
基于js中document.cookie全面解析
2017/09/14 Javascript
bootstrap日期插件daterangepicker使用详解
2017/10/19 Javascript
解决vue A对象赋值给B对象,修改B属性会影响到A的问题
2018/09/25 Javascript
webpack + vue 打包生成公共配置文件(域名) 方便动态修改
2019/08/29 Javascript
微信小程序修改checkbox的样式代码实例
2020/01/21 Javascript
vue 虚拟DOM的原理
2020/10/03 Javascript
Python使用一行代码获取上个月是几月
2018/08/30 Python
Python中typing模块与类型注解的使用方法
2019/08/05 Python
python zip()函数使用方法解析
2019/10/31 Python
TensorFLow 不同大小图片的TFrecords存取实例
2020/01/20 Python
50个强大璀璨的CSS3/JS技术运用实例
2010/02/27 HTML / CSS
美国最大的网络男装服装品牌:Bonobos
2017/05/25 全球购物
世界上获奖最多的手机镜头:Olloclip
2018/03/03 全球购物
送货司机岗位职责
2013/12/11 职场文书
关心下一代工作先进事迹
2014/08/15 职场文书
简单的个人租房协议书范本
2014/11/26 职场文书
创业计划书之宠物店
2019/09/19 职场文书
导游词之四川熊猫基地
2020/01/13 职场文书
MySQL 使用SQL语句修改表名的实现
2021/04/07 MySQL
Django rest framework如何自定义用户表
2021/06/09 Python
node.js如何自定义实现一个EventEmitter
2021/07/16 Javascript
Nginx源码编译安装过程记录
2021/11/17 Servers
无线电通信名词解释
2022/02/18 无线电