JavaScript 跨浏览器拖拽实现：分离触发器与目标及事件委托

拖拽事件基础与焦点处理策略

实现基础拖拽功能需要为相关元素绑定三个核心事件：onmousedown、onmousemove 和 onmouseup。

在 onmousemove 事件处理函数中，通过计算鼠标两次移动位置之间的距离来确定被拖移元素的位移量，从而更新其位置。

早期实现中常使用 setCapture 和 releaseCapture 方法，目的是确保在拖拽过程中被移动的元素始终拥有焦点。

之前的理解主要基于上述方法，可参考关于 setCapture 实现的 JS 拖动技术文章。随着跨浏览器开发需求的提高，需要对原有方案进行重构，并参考开源代码进行优化实现。

当前的实现思路可分解为以下步骤，下面将逐一展开说明。

自定义拖拽事件接口设计

拖拽的目的并非仅仅是移动元素，例如 Google 地图在每次移动后需计算当前空间坐标以加载地理信息。因此，设计中引入了几个关键事件，列表如下：

onDragStart：当元素开始拖移时触发。若注册了该事件，回调函数将接收两个参数 x 和 y，分别代表拖移开始时元素的坐标。

onDrag：在元素拖移过程中触发。若注册了该事件，回调函数将接收两个参数 nx 和 ny，代表拖移过程中坐标发生的偏移量。

onDragEnd：当拖移结束时触发。若注册了该事件，回调函数将接收两个参数 x 和 y，分别代表被移动元素当前的最终坐标。

关于 onmousedown 事件的绑定对象，以往通常直接绑定在被拖移元素上，但这缺乏灵活性。新设计允许将 onmousedown 绑定在任意不相关的元素上，同时实现对该元素的拖动控制。

为确保元素在移动过程中保持焦点并实现跨浏览器兼容，不再使用 setCapture 等方法。思路是：元素失去焦点是因为将 onmousemove 事件注册在了被拖移元素上，这并非必需。因此，当触发 onmousedown 后，将 onmousemove 和 onmouseup 事件直接注册到 document 对象上，这样无论鼠标移动到何处，都能正确捕获事件。

经过上述说明，接下来直接查看代码结构。

 
Drag = {
obj: null,
init: function (options) {
options.handler.onmousedown = this.start;
options.handler.root = options.root || options.handler;
var root = options.handler.root;
root.onDragStart = options.dragStart || new Function();
root.onDrag = options.onDrag || new Function();
root.onDragEnd = options.onDragEnd || new Function();
}, 
start: function (e) {//此时的this是handler
var obj = Drag.obj = this;
obj.style.cursor = 'move';
e = e || Drag.fixEvent(window.event);
ex = e.pageX;
ey = e.pageY;
obj.lastMouseX = ex;
obj.lastMouseY = ey;
var x = obj.root.offsetLeft;
var y = obj.root..offsetTop;
obj.root.style.left = x + "px";
obj.root.style.top = y + "px";
document.onmouseup = Drag.end;
document.onmousemove = Drag.drag;
obj.root.onDragStart(x, y);
}, 
drag: function (e) {
e = e || Drag.fixEvent(window.event);
ex = e.pageX;
ey = e.pageY;
var root = Drag.obj.root;
var x = root.style.left ? parseInt(root.style.left) : 0;
var y = root.style.top ? parseInt(root.style.top) : 0;
var nx = ex - Drag.obj.lastMouseX + x;
var ny = ey - Drag.obj.lastMouseY + y;
root.style.left = nx + "px";
root.style.top = ny + "px";
Drag.obj.root.onDrag(nx, ny);
Drag.obj.lastMouseX = ex;
Drag.obj.lastMouseY = ey;
}, 
end: function (e) {
var x = Drag.obj.root.style.left ? parseInt(Drag.obj.root.style.left) : 0;
var y = Drag.obj.root.style.top ? parseInt(Drag.obj.root.style.top) : 0;
Drag.obj.root.onDragEnd(x, y);
document.onmousemove = null;
document.onmouseup = null;
Drag.obj = null;
}, 
fixEvent: function (e) {
e.pageX = e.clientX + document.documentElement.scrollLeft;
e.pageY = e.clientY + document.documentElement.scrollTop;
return e;
} 
} 

上面init主要处理一些初如化工作，如记录onDragStart、onDrag、onDragEnd三个事件, handler为处理拖动事件的那个元素，root为被拖动的元素。

当在handler上点击后触发Drag.start方法，Drag.start主要为记录住鼠标相对整个页面的位置;给document注册onmouseup、onmousemove事件，及触发onDragStart事件。

Drag.drag方法也很简单，主要作用就是更新被搬移元素位置，同时记录住鼠标相对整个页面的位置。

Drag.end方法就更简单了，就是做一些收尾工作。

使用示例与HTML结构

最后给大家附段使用的代码吧,祝大家学习愉快！

 
Drag.init({
handler: document.getElementById("handler"),
root:document.getElementById("root");
}); 
<div id="root">
<h2 id="handler"></h2>
</div>