CODEWITHSUNDEEP
javascriptjquerymath
Shawn31313
Shawn31313

Reputation: 6052

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

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?

Upvotes: 13

Views: 23666

Answers (3)

Sergio Tulentsev
Sergio Tulentsev

Reputation: 230346

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>

Upvotes: 13

Motomotes
Motomotes

Reputation: 4237

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;

});

Upvotes: 7

Sergio Tulentsev
Sergio Tulentsev

Reputation: 230346

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

Upvotes: 10

Related Questions