Перетаскивание Div в jQuery - хорошо, когда мышь медленная, но не работает при быстром движении мыши - PullRequest
Новая
       61

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

17 голосов
/ 22 апреля 2011

Я хочу перетащить div, используя мой собственный код jQuery.

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

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

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

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

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

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

1 Ответ

34 голосов
/ 22 апреля 2011

Есть 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;
    }
});​
...