JavaScript拖拽实现（附注释），最经典！最简单！短小精悍！

文章转载自：http://blog.csdn.net/sunxing007/archive/2009/04/22/4100840.aspx，由笑的自然最后编辑

效果预览：

实现源代码：

[xhtml] view plaincopy
 
  1. <html>  
  2. <head>  
  3. <title>Drag[笑的自然最后修改编辑]</title>  
  4. </head>  
  5. <body>  
  6. <a href="http://blog.csdn.net/xxd851116" mce_href="http://blog.csdn.net/xxd851116">笑的自然最后修改编辑</a>  
  7. <div id="r" style="position:absolute; left:100px; top:100px; background-color:#F00; height:80px; 80px; cursor: pointer;"></div>  
  8. <div id="g" style="position:absolute; left:250px; top:100px; background-color:#0F0; height:80px; 80px; cursor: pointer;"></div>  
  9. <div id="b" style="position:absolute; left:400px; top:100px; background-color:#00F; height:80px; 80px; cursor: pointer;"></div>  
  10. <mce:script type="text/javascript"><!--  
  11. var Drag = {  
  12.     //当前被drag的对象  
  13.     obj: null,  
  14.     //初始化  
  15.     init: function(id){  
  16.         var o = document.getElementById(id);  
  17.         //当onmousedown开始拖拽  
  18.         o.onmousedown = Drag.start;  
  19.     },  
  20.     start: function(e){  
  21.         var o = Drag.obj = this;  
  22.         //lastMouseX，lastMouseY记录上次鼠标的位置  
  23.         o.lastMouseX = Drag.getEvent(e).x;  
  24.         o.lastMouseY = Drag.getEvent(e).y;  
  25.         //当onmousemove开始移动  
  26.         document.onmousemove = Drag.move;  
  27.         //当onmouseup终止拖拽  
  28.         document.onmouseup = Drag.end;  
  29.     },  
  30.     move: function(e){  
  31.         var o = Drag.obj;  
  32.         //dx, dy表示鼠标移动的距离  
  33.         var dx = Drag.getEvent(e).x - o.lastMouseX;  
  34.         var dy = Drag.getEvent(e).y - o.lastMouseY;  
  35.         //因为element.style.left通常返回的结果是'200px'的形式，所以要用parseInt转化  
  36.         var left = parseInt(o.style.left) + dx ;  
  37.         var top = parseInt(o.style.top) + dy;  
  38.         o.style.left = left;  
  39.         o.style.top = top;  
  40.         o.lastMouseX = Drag.getEvent(e).x;  
  41.         o.lastMouseY = Drag.getEvent(e).y;  
  42.     },  
  43.     end: function(e){  
  44.         document.onmousemove = null;  
  45.         document.onMouseup = null;  
  46.         Drag.obj = null;  
  47.     },  
  48.     //辅助函数，处理IE和FF不同的event模型  
  49.     getEvent: function(e){  
  50.         if (typeof e == 'undefined'){  
  51.             e = window.event;  
  52.         }  
  53.         //alert(e.x?e.x : e.layerX);  
  54.         if(typeof e.x == 'undefined'){  
  55.             ee.x = e.layerX;//复制了n遍，到了csdn就变成ee.x了  
  56.         }  
  57.         if(typeof e.y == 'undefined'){  
  58.             ee.y = e.layerY;//复制了n遍，到了csdn就变成ee.x了  
  59.         }  
  60.         return e;  
  61.     }  
  62. };  
  63.   
  64. //测试代码开始，使三个div具有drag and drop的能力。  
  65. Drag.init('r');  
  66. Drag.init('g');  
  67. Drag.init('b');  
  68. // --></mce:script>  
  69. </body>  
  70. </html>  
【推广】 免费学中医，健康全家人
原文地址：https://www.cnblogs.com/mfryf/p/3098254.html