在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

有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;
    }
});?