Question

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

这个关于jsfiddle的例子在鼠标移动缓慢时工作正常

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

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

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

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

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

Answer 1

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

编辑：实际上，我猜鼠标也应该放在文档上，以防你在快速移动过程中松开鼠标并且光标在盒子外面。更新了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;
    }
});

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

1 个答案: