Как определить расстояние, на которое движется пользовательская мышь?

Я пытаюсь определить расстояние, на которое движется мышь, в пикселях. В настоящее время я использую:

$(document).mousemove(function(event) {
    var startingTop = 10,
        startingLeft = 22,
        math = Math.abs(((startingTop - event.clientY) + (startingLeft - event.clientX)) + 14) + 'px';
    $('span').text('From your starting point(22x10) you moved:   ' + math);
});

Однако, я не чувствую, что это правильный способ сделать это, или это так? Это не кажется мне последовательным.

Вот демонстрация того, как он работает прямо сейчас: http://jsfiddle.net/Em4Xu/1/

Дополнительные сведения:

Я на самом деле разрабатываю плагин перетаскивания и хочу создать функцию с именем distance, например, с помощью draggable, где вам нужно вытащить мышью определенное количество пикселей до того, как оно перетащит. Я не уверен на 100%, как это сделать, поэтому сначала мне нужно получить пиксели, которые мышь переместила с позиции startTop и startLeft.

Есть ли у кого-нибудь предложения?

Ответ 1

Вы ошиблись в своей математике. Здесь улучшена версия: 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('From your starting point(22x10) you moved:   ' + math);
});

Ответ 2

Здесь версия, которая измеряет расстояние, которое перемещает мышь:

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('So far your mouse ran this many pixels:   ' + Math.round(totalDistance));
    
    }
    lastSeenAt.x = event.clientX;
    lastSeenAt.y = event.clientY;
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span></span>

Ответ 3

Придумал что-то похожее на Sergio, но это будет вычислять беспорядок с точки, где была удержана мышь, и, как и подруга, сказал расстояние между двумя точками,

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

var totalMovement = 0;
var lastX = -1;
var lastY = -1;
var startX = -1;
var startY = -1;

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

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

    totalMovement += Math.sqrt(Math.pow(lastY - event.clientY, 2) + Math.pow(lastX - event.clientX, 2));

    $('span').text('From your starting point (' + startX + 'x' + startY + ') you moved:   ' + totalMovement);

    lastX = event.clientX;
    lastY = event.clientY;

});


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

 startX = event.clientX;
 startY = event.clientY;
 lastX = event.clientX;
 lastY = event.clientY;

});


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

 startX = -1;
 startY = -1;
 totalMovement = 0;
 lastX = 0;
 lastY = 0;

});