在jQuery中拖动Div – 当鼠标缓慢时就很好,但是在鼠标移动快的时候会失败

有两个问题.一个是你在鼠标离开元素时取消拖动,你不想这样做.第二个是mousemove只是在盒子上,一旦光标开箱即可,不再执行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;
    }
});​