Wie um die Richtung zu bestimmen, die auf onmousemove-event?

Auf einige Zustand, den ich kündigen möchte onmousemove Ereignis, wenn Maus nach unten geht, zum Beispiel. Ist es möglich, um die Richtung zu bestimmen onmousemove Veranstaltung? jQ oder JS ist Ok.

Ich habe drag ' N ' Drop-Elemente. Der Benutzer zieht die elenment bis. Wenn, zum Beispiel, im unteren Teil der element erreicht eine position im Dokument (d.h. 500px von der Spitze des Dokuments), die onmousemove hält. Und wenn die Benutzer versuchen, ziehen Sie das element, bis wieder die Funktion wird nicht gestartet. Nur ziehen Sie nach unten, möglich sein wird für dieses element ein. Also dachte ich, es wäre ganz einfach, es zu tun, indem er die Richtung der mousemove Veranstaltung. Aber es scheint, gibt es keine solche Art von standard-Eigenschaften.

  • was tun, wirklich tun wollen?
  • Was haben Sie bisher ausprobiert??
  • Etwas noch nicht. Ich dachte, es gibt vielleicht einige Eigenschaften von Maus-Ereignissen, die ich nicht finden konnte, mich in der W3C-Spezifikation und in jQ-Dokumentation. Wenn es nichts besonderes zu diesem Zweck werde ich versuchen, die zu lösen die Aufgabe anders. Aber seltsam, es kann sehr nützlich sein, die standard-Eigenschaft.
InformationsquelleAutor Green | 2012-01-28
  1. 23

    Können Sie speichern die position des letzten mousemove Ereignis zu vergleichen, um die aktuelle position:

    //setup a variable to store our last position
var last_position = {},
$output       = $('#output');

//note that `.on()` is new in jQuery 1.7 and is the same as `.bind()` in this case
$(document).on('mousemove', function (event) {

    //check to make sure there is data to compare against
    if (typeof(last_position.x) != 'undefined') {

        //get the change from last position to this position
        var deltaX = last_position.x - event.clientX,
            deltaY = last_position.y - event.clientY;

        //check which direction had the highest amplitude and then figure out direction by checking if the value is greater or less than zero
        if (Math.abs(deltaX) > Math.abs(deltaY) && deltaX > 0) {
            //left
        } else if (Math.abs(deltaX) > Math.abs(deltaY) && deltaX < 0) {
            //right
        } else if (Math.abs(deltaY) > Math.abs(deltaX) && deltaY > 0) {
            //up
        } else if (Math.abs(deltaY) > Math.abs(deltaX) && deltaY < 0) {
            //down
        }
    }

    //set the new last position to the current for next time
    last_position = {
        x : event.clientX,
        y : event.clientY
    };
});

    Hier ist eine demo: http://jsfiddle.net/Dv29e/

    Update

    Können Sie auch drosseln mousemove Veranstaltung, um sich eher um eine Allgemeine Vorstellung davon, wo die Maus bewegt hat:

    var last_position = {},
    $output       = $('#output'),
    mousemove_ok  = true,
    mouse_timer   = setInterval(function () {
        mousemove_ok = true;
    }, 500);
$(document).on('mousemove', function (event) {
    if (mousemove_ok) {
        mousemove_ok = false;
        ...
    }
});

    Diese wird nur prüfen, der cursor die position, gegen die es in der Vergangenheit position, wenn:

    1. der letzten position vorhanden ist.
    2. die mousemove_ok variable true was getan wird, jede halbe Sekunde.

    Hier ist eine gedrosselte demo: http://jsfiddle.net/Dv29e/4/

    • Brauchen Sie, um das scrollen zu berücksichtigen.
    • Danke für die Korrektur, clientX und clientY sind wahrscheinlich besser geeignet.
    InformationsquelleAutor Jasper
  2. 7

    Gibt es standard-Eigenschaften, die zeigen, dass deltas relevant vorherigen mouse-move-Ereignis:

    document.addEventListener('mousemove', function (event) {
  directionX = event.movementX || event.mozMovementX || event.webkitMovementX || 0;
  directionY = event.movementY || event.mozMovementY || event.webkitMovementY || 0;
});

    Wie gesagt, in der Dokumentation:

    Den MouseEvent.Eigenschaften movementx nur-lese-Eigenschaft stellt die Verschiebung in der X-Koordinate des Mauszeigers zwischen diesem Ereignis und dem vorherigen Ereignis mousemove.

    • Das ist schön, aber die support-Liste ist klein!
    InformationsquelleAutor mirik
  3. 0

    Veranstaltung.Eigenschaften movementx ist der Unterschied in der px aus den vorherigen positionX, z.B. 100 für rechts-Bewegung von 100 px, -100 für Links-Bewegung etc, 0 für keine Bewegung.

    InformationsquelleAutor jimver04
Schreibe einen Kommentar