在jQuery中拖动Div - 当鼠标缓慢时就很好，但是在鼠标移动快的时候会失败 [英] Dragging a Div in jQuery - fine when mouse is slow, but fails on fast mouse movement

问题描述

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

I want to drag a div around using my own jQuery code.

当鼠标移动很慢时，jsfiddle上的这个例子可以正常工作

This example on jsfiddle works fine when the mouse movements are slow

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

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

But any fast movement pulls the mouse out of the box and the tracking is lost.

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

jQuery UI draggable doesn't have this problem and tracks just fine regardless of how fast you move: http://jqueryui.com/demos/draggable/

但是我想滚动我自己的简单版本，以便我可以将它与Raphael，按键等整合。我看过jQuery UI draggable源码，但对我来说，相当不可穿透（800行）。

But I want to roll my own simple version so that I can integrate it with Raphael, key presses, etc. I've looked at the jQuery UI draggable source but it is, for me, pretty impenetrable (800 lines).

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

I don't think it is an issue with event bubbling... any ideas?

推荐答案

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

There are 2 issues. One is that you are canceling the drag when the mouse leaves the element, you don't want to do that. The 2nd is that the mousemove is only on box, once the cursor is out of the box it is no longer going to execute the mousemove. You can store the element which you are dragging and then add the mousemove to the entire page instead.

编辑：实际上，我猜想mouseup应该也是在文档上以防您在快速移动期间释放鼠标点击，并且光标位于框外。更新了jsfiddle。

Actually, I guess the mouseup should really also be on the document just in case you release the mouse click during a fast movement and your cursor is outside the box. Updated the 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 - 当鼠标缓慢时就很好，但是在鼠标移动快的时候会失败的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！