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

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

当鼠标移动很慢时,jsfiddle上的此示例可以正常工作

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

但任何快速移动将鼠标拉出箱子,跟踪就会丢失.

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

但是我想要滚动我自己的简单版本,以便我可以将它与Raphael,按键等进行整合.我已经看过jQuery UI可拖动源,但对我来说,这是非常不可穿透的(800行).

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

解决方法

有两个问题.一个是你在鼠标离开元素时取消拖动,你不想这样做.第二个是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;
    }
});

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

解决方法

猜你在找的jQuery相关文章