13

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?

5
  • 1
    Do you need to accumulate the distance or not? Dec 31, 2011 at 5:59
  • 2
    Not sure what you're really trying to do, but distance between two points is calculated as: Math.sqrt((deltaX * deltaX) + (deltaY * deltaY))
    – jfriend00
    Dec 31, 2011 at 6:23
  • 1
    Could you put this as an answer with some more details. I dont see how that would work.
    – Shawn31313
    Dec 31, 2011 at 6:29
  • No, I can't put it in an answer because I'm unable to understand from your question what you're trying to do. Please clarify.
    – jfriend00
    Dec 31, 2011 at 6:33
  • I'm actually developing a drag and 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 PX before it drags. I'm not fully sure how to do this. So first I need to get the PX that the mouse has moved from the startingTop and startingLeft position.
    – Shawn31313
    Dec 31, 2011 at 6:53

3 Answers 3

13

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>

2
  • This is not really what I want. Here is a better description of what I want: I'm actually developing a drag and 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 PX before it drags. I'm not fully sure how to do this. So first I need to get the PX that the mouse has moved from the startingTop and startingLeft position.
    – Shawn31313
    Dec 31, 2011 at 6:55
  • 1
    That tends to beg the question why you're reinventing the wheel rather than modding jQuery UI's draggable to accomplish your goal.
    – lsuarez
    Dec 31, 2011 at 6:58
10

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);
});
3
  • But it doesnt work when using different numbers. Like here: jsfiddle.net/Em4Xu/30
    – Shawn31313
    Dec 31, 2011 at 7:11
  • @Shawn31313: what do you mean "it doesn't work"? Seems working to me. Dec 31, 2011 at 7:14
  • Never Mind. It was just when I put it into my plugin. I need to change something in the math. Thanks again for the answer.
    – Shawn31313
    Dec 31, 2011 at 7:25
7

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;

});
3
  • Thats just the amount the mouse has move. I need to detect how many PX away the mouse is from the starting point
    – Shawn31313
    Dec 31, 2011 at 6:57
  • Check the edit I made, it takes the total movement since the mouse has been held down now.
    – Motomotes
    Dec 31, 2011 at 7:06
  • @Motes: you should put it into jsfiddle. It's much easier to test there :-) Dec 31, 2011 at 7:15

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.