嗯哼。不多说,直接上代码了。
-
// 为元素 绑定拖动事件 function bindDragEvent(obj){ obj.onmousedown = function(e){ e = e || window.event; obj.setCapture && obj.setCapture(); // IE8 及以下 强制捕获下一次单击事件 obj.fixedX = e.clientX - (obj.getBoundingClientRect().left - document.documentElement.clientLeft); obj.fixedY = e.clientY - (obj.getBoundingClientRect().top - document.documentElement.clientTop); document.onmousemove = function(e){ e = e || window.event; var x = e.clientX + (document.documentElement.scrollLeft || window.pageXOffset || document.body.scrollLeft); var y = e.clientY + (document.documentElement.scrollTop || window.pageYOffset || document.body.scrollTop); obj.style.left = x - obj.fixedX + "px"; // 元素在页面中的坐标 = 鼠标在页面中的坐标 - 元素在页面中的坐标 obj.style.top = y - obj.fixedY + "px"; }; document.onmouseup = function(){ document.onmousemove = null; // 解除 鼠标移动div跟随 事件 document.onmouseup = null; // 解除鼠标松开事件 obj.releaseCapture && obj.releaseCapture(); // IE8 及以下 解除强制捕获单击事件 }; return false; }; }