模拟拖拽的原理：

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动画-模拟拖拽的更多相关文章

  1. javascript动画系列第一篇——模拟拖拽

    × 目录 [1]原理介绍 [2]代码实现 [3]代码优化[4]拖拽冲突[5]IE兼容 前面的话 从本文开始,介绍javascript动画系列.javascript本身是具有原生拖放功能的,但是由于兼容 ...

  2. 每天一个JavaScript实例-html5拖拽

    <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...

  3. day25—JavaScript实现文件拖拽上传案例实践

    转行学开发,代码100天——2018-04-10 今天记录一个利用JavaScript实现文件拖拽上传到浏览器,后天将文件打开的小案例. 基本功能:1点击添加文件 2 文件拖拽添加 html: < ...

  4. 模拟拖拽图片 碰撞检测 DOM 鼠标事件 闭包

    <!doctype html><html lang="en"> <head> <meta charset="UTF-8" ...

  5. JavaScript：鼠标拖拽效果

    (之前的那个模板方法模式实在没搞懂...等几天再去研究8) 预览效果: 限制拖动范围在视口内.调整窗口时自动居中... <!DOCTYPE html> <html lang=&quo ...

  6. JavaScript实现图片拖拽、粘贴上传

    前些日子为老婆做了一个web管理商品的工具,因为商品的图片比较多并且还需要剪裁图,为了上传图片方便加了一个拖拽.粘贴上传的功能. 我已经把代码整理出来放到GitHub上了,有兴趣的朋友可以下来玩玩. ...

  7. javascript实现的拖拽回放

    这个功能很简单,直接贴代码啊: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "ht ...

  8. c++ 发送消息，模拟拖拽文件

    #include <ShlObj.h> BOOL SimulateDropFile(CString strFilePath) { }; wcstombs(szFile, strFilePa ...

  9. Javascript之盒子拖拽（跟随鼠标、边界限定、轨迹回放）

    本文通过拖拽案例,实现"跟随鼠标.边界限定.轨迹回放"三大效果: 完整代码中有详尽注释,故不再进行细致讲解: 对于案例中需要注意的重点或易错点问题,会总结在最后. 效果图(仅演示左 ...

随机推荐

  1. JS核心系列：浅谈 call apply 与 bind

    在JavaScript 中,call.apply 和 bind 是 Function 对象自带的三个方法,这三个方法的主要作用是改变函数中的 this 指向,从而可以达到`接花移木`的效果.本文将对这 ...

  2. 使用 JavaScriptService 在.NET Core 里实现DES加密算法

    文章<ASP.NET Core love JavaScript>和<跨平台的 NodeJS 组件解决 .NetCore 不支持 System.Drawing图形功能的若干问题> ...

  3. SQL Server内存遭遇操作系统进程压榨案例

    场景: 最近一台DB服务器偶尔出现CPU报警,我的邮件报警阈(请读yù)值设置的是15%,开始时没当回事,以为是有什么统计类的查询,后来越来越频繁. 探索: 我决定来查一下,究竟是什么在作怪,我排查的 ...

  4. JavaScript性能优化

    如今主流浏览器都在比拼JavaScript引擎的执行速度,但最终都会达到一个理论极限,即无限接近编译后程序执行速度. 这种情况下决定程序速度的另一个重要因素就是代码本身. 在这里我们会分门别类的介绍J ...

  5. 9、 Struts2验证(声明式验证、自定义验证器)

    1. 什么是Struts2 验证器 一个健壮的 web 应用程序必须确保用户输入是合法.有效的. Struts2 的输入验证 基于 XWork Validation Framework 的声明式验证: ...

  6. Mysql存储引擎及选择方法

    0x00 Mysql数据库常用存储引擎 Mysql数据库是一款开源的数据库,支持多种存储引擎的选择,比如目前最常用的存储引擎有:MyISAM,InnoDB,Memory等. MyISAM存储引擎 My ...

  7. 获取 dhcp IP 过程分析 - 每天5分钟玩转 OpenStack（91）

    前面我们已经讨论了 DHCP agent 的配置以及 namespace 如何隔离 dnsmasq 服务,本节将以 cirros-vm1 为例分析获取 DHCP IP 的详细过程. 在创建 insta ...

  8. jQuery禁用或启用

    禁用:.attr("disabled","disabled"); 启用:.removeAttr("disabled");

  9. Ubuntu下开启php调试模式，显示报错信息

    在Ubuntu下php的缺省设置是不显示错误信息的,如果程序出错会显示“无法处理此请求的错误提示”,这在开发环境下非常不方便. 其实我们只要编辑下apache的配置文件就好 1.我的apache 配置 ...

  10. js格式化日期

    /** *对日期进行格式化, * @param date 要格式化的日期 * @param format 进行格式化的模式字符串 * 支持的模式字母有: * y:年, * M:年中的月份(1-12), ...