How can I detect the distance that the user's mouse has moved?

Question

I'm trying to detect the distance the mouse has moved, in pixels. I am currently using:

$(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);
});

However, I don't feel like this is the right way to do this, or is it? It doesn't feel to consistent to me.

Here is a demo of how it is working right now: http://jsfiddle.net/Em4Xu/1/

Extra Details:

I'm actually developing a drag & drop plugin and I want to create a feature called distance , like draggable has it, where you have to pull your mouse a certain amount of pixels before it drags. I'm not 100% sure how to do this, so first I need to get the pixels that the mouse has moved from the startingTop and startingLeft position.

Does anyone have any suggestions?

Answer 1

Here's a version that meters distance that mouse travels:

 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> 

Answer 2

You got your math wrong. Here's improved 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('From your starting point(22x10) you moved:   ' + math);
});

Answer 3

Came up with the something similiar to Sergio, but this will calculate disatance from the point the mouse has been held down, and like jfriend said the distance between two points,

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;

});