Перетаскивание Div в jQuery - отлично, когда мышь медленно, но не работает при быстром перемещении мыши

Я хочу перетащить div с помощью собственного кода jQuery.

Этот пример в jsfiddle отлично работает, когда движения мыши медленны

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

Но любое быстрое движение вытаскивает мышь из коробки, и отслеживание теряется.

jQuery UI draggable не имеет этой проблемы и отлично отслеживает, независимо от того, как быстро вы двигаетесь: http://jqueryui.com/demos/draggable/

Но я хочу свернуть свою собственную простую версию, чтобы я мог интегрировать ее с Raphael, нажатиями клавиш и т.д. Я посмотрел на источник перетаскивания jQuery UI, но для меня это довольно непроницаемо (800 строк).

Я не думаю, что это проблема с пузырьками событий... любые идеи?

Ответ 1

Есть 2 вопроса. Во-первых, вы отменяете перетаскивание, когда мышь покидает элемент, вы не хотите этого делать. Второй заключается в том, что mousemove находится только на коробке, как только курсор находится вне коробки, он больше не будет выполнять mousemove. Вы можете сохранить элемент, который вы перетаскиваете, а затем добавить mousemove на всю страницу.

EDIT: На самом деле, я думаю, что мышь действительно должна быть в документе на всякий случай, если вы отпустите щелчок мыши во время быстрого перемещения, а ваш курсор находится за пределами окна. Обновлен 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;
    }
});