How to calculate mouse move distance from specify offset

Question

I have some problem. I need to calculate some mouse move in pixels from mousedown event to mouseup. So i have this code:

selectArea.on({
    mousedown : function(e) {
        select = true;
    },
    mousemove : function(e) {
        var x2, y2, offset = $(this).offset();
            x2 = e.pageX - offset.left,
            y2 = e.pageY - offset.top,
            width = ?,
            height = ?
        ...
    },
    mouseup : function() {
        select = false;
    }
});

Now i need to know how many pixels i have moved mouse from mousedown offset to mouseup offset, is there any posible to calculate this? Much thx for help.

Answer 1

There are two different solutions, depending on your definition of "how many pixels i have moved"

Scenario: Mouse moves 25px to the right and 75px to the left.

Solution 1: 50px; (distance between start and end)

In the mousedown handler you save the coordinates of the mouse. In the mouseup handler you compute the difference between the current mouse coordinates and the saved ones.

Solution 2: 100px; (distance traveled)

In the mousedown handler you set a boolean to indicate you are recording and save the coordinates of the mouse and initialize the distance with 0. In the mousemove handler you compute the difference between the current mouse coordinates and the saved coordinates (add it to distance) and then you overwrite the saved coordinates with your current mouse coordinates. In the mouseup handler you output the distance and unset the boolean.

You code seems to be for the second solution, but the question asks for the first.