使用jQuery拖动Div-当鼠标移动缓慢时很好，但在快速移动鼠标时失败。

Question

使用jQuery拖动Div-当鼠标移动缓慢时很好，但在快速移动鼠标时失败。

jqueryeventsdraggabledrag

20

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

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

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

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

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

但我想自己编写一个简单的版本，以便与Raphael、按键等整合。我看过jQuery UI draggable源码，但对我来说它非常难懂（800行）。

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

- craic.com

似乎与鼠标跟踪有关？ - daryl

我不知道你是否注意到，当你将框拖得太快时，鼠标指针会跑出框外并失去“抓住”它的状态。 :) - secretAgentB

是的，它被称为鼠标跟踪。 - daryl

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- James Montagne · Accepted Answer

有两个问题。首先，您取消了鼠标离开元素时的拖动，但您不想这样做。第二个问题是mousemove仅在box上执行，一旦光标移出box，它就不再执行mousemove。您可以存储要拖动的元素，然后将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;
    }
});