JavaScript 拖拽实现（附注释），最经典简单短小精悍！ 时间:2020-05-12 人气:0 效果预览： 实现源代码： <html> <head> <title>Drag[笑的自然最后修改编辑]</title> </head> <body> <div></div> <div></div> <div></div> <script type="text/javascript"><!-- var Drag = { //当前被drag的对象 obj: null, //初始化 init: function(id){ var o = document.getElementById(id); //当onmousedown开始拖拽 o.onmousedown = Drag.start; }, start: function(e){ var o = Drag.obj = this; //lastMouseX，lastMouseY记录上次鼠标的位置 o.lastMouseX = Drag.getEvent(e).x; o.lastMouseY = Drag.getEvent(e).y; //当onmousemove开始移动 document.onmousemove = Drag.move; //当onmouseup终止拖拽 document.onmouseup = Drag.end; }, move: function(e){ var o = Drag.obj; /https://img.qb5200.com/download-x/dx, dy表示鼠标移动的距离 var dx = Drag.getEvent(e).x - o.lastMouseX; var dy = Drag.getEvent(e).y - o.lastMouseY; //因为element.style.left通常返回的结果是'200px'的形式，所以要用parseInt转化 var left = parseInt(o.style.left) + dx ; var top = parseInt(o.style.top) + dy; o.style.left = left; o.style.top = top; o.lastMouseX = Drag.getEvent(e).x; o.lastMouseY = Drag.getEvent(e).y; }, end: function(e){ document.onmousemove = null; document.onMouseup = null; Drag.obj = null; }, //辅助函数，处理IE和FF不同的event模型 getEvent: function(e){ if (typeof e == 'undefined'){ e = window.event; } //alert(e.x?e.x : e.layerX); if(typeof e.x == 'undefined'){ ee.x = e.layerX;//复制了n遍，到了csdn就变成ee.x了 } if(typeof e.y == 'undefined'){ ee.y = e.layerY;//复制了n遍，到了csdn就变成ee.x了 } return e; } }; //测试代码开始，使三个div具有drag and drop的能力。 Drag.init('r'); Drag.init('g'); Drag.init('b'); // --></script> </body> </html> [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行] 加载全部内容