Ziehen Sie ein Div in jQuery - Prima, wenn die Maus langsam ist, aber nicht auf schnellen Maus-Bewegung

Ich will ziehen Sie ein div mit meinen eigenen jQuery-code.

In diesem Beispiel auf jsfiddle funktioniert gut, wenn die Maus Bewegungen sind langsam

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

Aber keine schnelle Bewegung zieht die Maus aus der box und das tracking verloren geht.

jQuery UI-draggable dieses problem nicht hat und die tracks einfach gut, unabhängig davon, wie schnell Sie sich bewegen: http://jqueryui.com/demos/draggable/

Aber ich möchte Rollen meines eigenen einfache version, so dass ich integrieren können es mit Raphael, Schlüssel Pressen, etc. Ich habe die jQuery UI-draggable-source-aber es ist, für mich, ziemlich undurchdringlich (800 Linien).

Ich glaube nicht, dass es ein Problem mit dem event-bubbling... irgendwelche Ideen?

InformationsquelleAutor der Frage craic.com | 2011-04-22

  1. 32

    Gibt es 2 Probleme. Einer ist, dass Sie das Abbrechen des ziehen, wenn die Maus verlässt das element, die Sie nicht wollen, das zu tun. Der 2. ist, dass das mousemove-Ereignis wird nur auf der box, sobald der cursor out of the box ist es nicht mehr zur Ausführung der mousemove. Speichern Sie das element, das Sie ziehen, und fügen Sie dann das mousemove-Ereignis für die gesamte Seite statt.

    EDIT: Tatsächlich, ich denke, das mouseup sollte wirklich auch auf die Urkunde nur, wenn Sie die Maustaste loslassen, klicken Sie während einer schnellen Bewegung und Ihrem cursor ist außerhalb der box. Aktualisiert die jsfiddle.

    Siehe hier:

    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;
    }
});​

    InformationsquelleAutor der Antwort James Montagne

Schreibe einen Kommentar