浅析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 相关文章推荐
js AspxButton的客户端操作
Jun 26 Javascript
精通Javascript系列之数值计算
Jun 07 Javascript
对javascript的一点点认识总结《javascript高级程序设计》读书笔记
Nov 30 Javascript
js实现卡片式项目管理界面UI设计效果
Dec 08 Javascript
BootStrap学习系列之Bootstrap Typeahead 组件实现百度下拉效果(续)
Jul 07 Javascript
jQuery插件echarts实现的去掉X轴、Y轴和网格线效果示例【附demo源码下载】
Mar 04 Javascript
vue 使用eventBus实现同级组件的通讯
Mar 02 Javascript
基于Vue 2.0 监听文本框内容变化及ref的使用说明介绍
Aug 24 Javascript
解决layer弹出层自适应页面大小的问题
Sep 16 Javascript
Vue.js实现大屏数字滚动翻转效果
Nov 29 Javascript
JS实现星星海特效
Dec 24 Javascript
vue实现移动端项目多行文本溢出省略
Jul 29 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
PHP4实际应用经验篇(1)
2006/10/09 PHP
探讨Smarty中如何获取数组的长度以及smarty调用php函数的详解
2013/06/20 PHP
PHP 错误处理机制
2015/07/06 PHP
jQuery使用手册之一
2007/03/24 Javascript
Javascript this指针
2009/07/30 Javascript
javascript正则表达式中的replace方法详解
2015/04/20 Javascript
谈一谈javascript中继承的多种方式
2016/02/19 Javascript
Boostrap入门准备之border box
2016/05/09 Javascript
Javascript打印局部页面实例
2016/06/21 Javascript
jQuery实现简单的tab标签页效果
2016/09/12 Javascript
BootStrap Table 获取同行不同列元素的方法
2016/12/19 Javascript
vue watch自动检测数据变化实时渲染的方法
2018/01/16 Javascript
微信小程序canvas实现刮刮乐效果
2018/07/09 Javascript
Nodejs实现多文件夹文件同步
2018/10/17 NodeJs
Vue2.0+Vux搭建一个完整的移动webApp项目的示例
2019/03/19 Javascript
基于Vue SEO的四种方案(小结)
2019/07/01 Javascript
Vue在chrome44偶现点击子元素事件无法冒泡的解决方法
2019/12/15 Javascript
详解tensorflow实现迁移学习实例
2018/02/10 Python
Python mutiprocessing多线程池pool操作示例
2019/01/30 Python
Python时间和字符串转换操作实例分析
2019/03/16 Python
python实现远程控制电脑
2019/05/23 Python
Python PIL图片添加字体的例子
2019/08/22 Python
使用Python给头像戴上圣诞帽的图像操作过程解析
2019/09/20 Python
使用pytorch和torchtext进行文本分类的实例
2020/01/08 Python
keras分类模型中的输入数据与标签的维度实例
2020/07/03 Python
零基础学python应该从哪里入手
2020/08/11 Python
简历中个人自我评价范文
2013/12/26 职场文书
违反学校规定检讨书
2014/01/18 职场文书
批评与自我批评材料
2014/02/15 职场文书
文明班集体申报材料
2014/05/23 职场文书
领导班子对照检查剖析材料
2014/10/13 职场文书
2015初一年级组工作总结
2015/07/24 职场文书
Python list去重且保持原顺序不变的方法
2021/04/03 Python
【海涛dota解说】海涛小满开黑4v5被破两路翻盘潮汐第一视角解说
2022/04/01 DOTA
Java Lambda表达式常用的函数式接口
2022/04/07 Java/Android
MySql数据库 查询时间序列间隔
2022/05/11 MySQL