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

Question

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

当鼠标移动缓慢时，jsfiddle 上的这个例子可以正常工作

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

但任何快速移动都会将鼠标拉出框外，并且会丢失跟踪。

jQuery UI draggable 没有这个问题，无论你移动多快都可以很好地跟踪：http://jqueryui.com/demos/draggable/

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

我认为事件冒泡不是问题...有什么想法吗？

Answer 1

有两个问题。一种是当鼠标离开元素时您正在取消拖动，您不想这样做。第二个是鼠标移动只在盒子上，一旦光标离开盒子就不再执行鼠标移动。您可以存储要拖动的元素，然后将 mousemove 添加到整个页面。

编辑：实际上，我想 mouseup 也应该在文档上，以防万一您在快速移动期间释放鼠标单击并且光标位于框外。更新了 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;
    }
});​