Wie kann ich feststellen, wie weit sich die Maus des Benutzers bewegt hat?

Question

Ich versuche, die Entfernung zu erkennen, die die Maus in Pixeln bewegt hat. Ich verwende derzeit:

$(document).mousemove(function(event) {
    var startingTop = 10,
        startingLeft = 22,
        math = Math.abs(((startingTop - event.clientY) + (startingLeft - event.clientX)) + 14) + 'px';
    $('span').text('Von Ihrem Ausgangspunkt (22x10) haben Sie sich bewegt:   ' + math);
});

Ich habe jedoch nicht das Gefühl, dass dies der richtige Weg ist, oder ist es? Es fühlt sich für mich nicht konsistent an.

Hier ist eine Demo, wie es im Moment funktioniert: http://jsfiddle.net/Em4Xu/1/

Zusätzliche Details:

Ich entwickle tatsächlich ein Drag & Drop-Plugin und möchte eine Funktion namens distance erstellen, ähnlich wie draggable es hat, wo Sie die Maus eine bestimmte Anzahl von Pixeln ziehen müssen, bevor es zieht. Ich bin mir nicht zu 100% sicher, wie das geht, also muss ich zuerst erhalten, wie viele Pixel die Maus von der Ausgangsposition startingTop und startingLeft entfernt hat.

Hat jemand Vorschläge?

Answer 1

Hier ist eine Version, die die Entfernung misst, die die Maus zurücklegt:

var totalDistance = 0;
var lastSeenAt = {x: null, y: null};

$(document).mousemove(function(event) {
    if(lastSeenAt.x) {
        totalDistance += Math.sqrt(Math.pow(lastSeenAt.y - event.clientY, 2) + Math.pow(lastSeenAt.x - event.clientX, 2));

    $('span').text('Bisher hat Ihre Maus so viele Pixel zurückgelegt:   ' + Math.round(totalDistance));

    }
    lastSeenAt.x = event.clientX;
    lastSeenAt.y = event.clientY;
});

Answer 2

Du hast dich verrechnet. Hier ist die verbesserte Version: http://jsfiddle.net/stulentsev/Em4Xu/26/

$(document).mousemove(function(event) {
    var startingTop = 10,
        startingLeft = 22,
        math = Math.round(Math.sqrt(Math.pow(startingTop - event.clientY, 2) + 
                                    Math.pow(startingLeft - event.clientX, 2))) + 'px';
    $('span').text('Von deinem Startpunkt(22x10) hast du dich bewegt um:   ' + math);
});

Answer 3

Kam auf etwas Ähnliches wie Sergio, aber das wird die Entfernung vom Punkt berechnen, an dem die Maus gehalten wurde, und wie jfriend sagte, die Entfernung zwischen zwei Punkten,

d = ( (x1-x2)^2 + (y1-y2)^2 )^(1/2)

var gesamtbewegung = 0;
var letztesX = -1;
var letztesY = -1;
var startX = -1;
var startY = -1;

$(document).mousemove(function(event) {

    if (startX == -1) {
        return;
    }
    if (startY == -1) {
        return;   
    }

    gesamtbewegung += Math.sqrt(Math.pow(letztesY - event.clientY, 2) + Math.pow(letztesX - event.clientX, 2));

    $('span').text('Von Ihrem Ausgangspunkt (' + startX + 'x' + startY + ') haben Sie sich bewegt:   ' + gesamtbewegung);

    letztesX = event.clientX;
    letztesY = event.clientY;

});

$(document).mousedown(function(event) {

 startX = event.clientX;
 startY = event.clientY;
 letztesX = event.clientX;
 letztesY = event.clientY;

});

$(document).mouseup(function(event) {

 startX = -1;
 startY = -1;
 gesamtbewegung = 0;
 letztesX = 0;
 letztesY = 0;

});