在jQuery中拖动Div – 当鼠标速度很慢时很好，但是在快速鼠标移动时失败

我想使用自己的jQuery代码拖动div。

当鼠标移动缓慢时，这个关于jsfiddle的例子工作得很好

http://jsfiddle.net/craic/kr7Un/

但是任何快速移动都会将鼠标拉出盒子并且跟踪丢失。

jQuery UI draggable没有这个问题，无论你移动的速度如何，跟踪都很好： http ： //jqueryui.com/demos/draggable/

但我想推出自己的简单版本，以便我可以将它与Raphael，按键等集成。我已经看过jQuery UI可拖动的源代码，但对我来说，这是非常难以理解的（800行）。

我不认为这是事件冒泡的问题……任何想法？

Answer 1

有2个问题。 一个是你在鼠标离开元素时取消拖动，你不想这样做。 第二个是鼠标移动仅在盒子上，一旦光标开箱即可，它不再执行鼠标移动。 您可以存储要拖动的元素，然后将鼠标移动到整个页面。

编辑：实际上，我想鼠标应该也在文档上，以防你在快速移动过程中松开鼠标并且光标在框外。 更新了jsfiddle。

看这里：

http://jsfiddle.net/Jjgmz/1/

var box = $('#box'); box.offset({ left: 100, top: 75 }); var drag = { elem: null, x: 0, y: 0, state: false }; var delta = { x: 0, y: 0 }; box.mousedown(function(e) { if (!drag.state) { drag.elem = this; this.style.backgroundColor = '#f00'; drag.x = e.pageX; drag.y = e.pageY; drag.state = true; } return false; }); $(document).mousemove(function(e) { if (drag.state) { drag.elem.style.backgroundColor = '#f0f'; delta.x = e.pageX - drag.x; delta.y = e.pageY - drag.y; $('#log').text(e.pageX + ' ' + e.pageY + ' ' + delta.x + ' ' + delta.y); var cur_offset = $(drag.elem).offset(); $(drag.elem).offset({ left: (cur_offset.left + delta.x), top: (cur_offset.top + delta.y) }); drag.x = e.pageX; drag.y = e.pageY; } }); $(document).mouseup(function() { if (drag.state) { drag.elem.style.backgroundColor = '#808'; drag.state = false; } });​