模拟拖拽的原理：

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. 你必须知道的EF知识和经验

    注意:以下内容如果没有特别申明,默认使用的EF6.0版本,code first模式. 推荐MiniProfiler插件 工欲善其事,必先利其器. 我们使用EF和在很大程度提高了开发速度,不过随之带来的 ...

  2. 关于几个主流语音SDK的接入问题

    这两周都在忙着游戏上线还有接入游戏语音,两周分别接了腾讯语音和百度语音!!! 关于腾讯语音的一些问题 由于发现腾讯语音的在录完音频后的数据是编过码的所以出现了一些问题: *不能解码(腾讯方不提供解码算 ...

  3. [高并发]Java高并发编程系列开山篇--线程实现

    Java是最早开始有并发的语言之一,再过去传统多任务的模式下,人们发现很难解决一些更为复杂的问题,这个时候我们就有了并发. 引用 多线程比多任务更加有挑战.多线程是在同一个程序内部并行执行,因此会对相 ...

  4. 一步步开发自己的博客 .NET版（11、Web.config文件的读取和修改）

    Web.config的读取 对于Web.config的读取大家都很属性了.平时我们用得比较多的就是appSettings节点下配置.如: 我们对应的代码是: = ConfigurationManage ...

  5. Bootstrap 模态框(Modal)插件

    页面效果: html+js: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> ...

  6. UWP开发之Template10实践：本地文件与照相机文件操作的MVVM实例(图文付原代码)

    前面[UWP开发之Mvvmlight实践五:SuspensionManager中断挂起以及复原处理]章节已经提到过Template10,为了认识MvvmLight的区别特做了此实例. 原代码地址:ht ...

  7. [原] 利用 OVS 建立 VxLAN 虚拟网络实验

    OVS 配置 VxLAN HOST A ------------------------------------------ | zh-veth0(10.1.1.1) VM A | | ---|--- ...

  8. 通过自定义特性，使用EF6拦截器完成创建人、创建时间、更新人、更新时间的统一赋值(使用数据库服务器时间赋值，接上一篇)

    目录: 前言 设计(完成扩展) 实现效果 扩展设计方案 扩展后代码结构 集思广益(问题) 前言: 在上一篇文章我写了如何重建IDbCommandTreeInterceptor来实现创建人.创建时间.更 ...

  9. interpreter(解释器模式)

    一.引子 其实没有什么好的例子引入解释器模式,因为它描述了如何构成一个简单的语言解释器,主要应用在使用面向对象语言开发编译器中:在实际应用中,我们可能很少碰到去构造一个语言的文法的情况. 虽然你几乎用 ...

  10. Git的四个基本概念及 git的工作流程