How can I retrieve all mouse coordinates between mousedown to mouseup event

Question

As per the jQuery docs below code can be used to capture mouseup and mouse down events. But my requirement is bit different

$("#dic").mouseup(function () {

}).mousedown(function () {

});  

But How can I calculate mouse moving co-ordinates between mousedown position to mouseup position. Please help me on this. How can I apply mousemove event between mousedown and mouseup

Answer 1

If you need to captue all points the mouse moves through during a drag, bind/unbind a new mousemove handler:

var allPoints = [];
$("#dic").mouseup(function (e) {
    $(this).unbind("mousemove", trackPoints);
}).mousedown(function (e) {
    $(this).bind("mousemove", trackPoints); 
});

function trackPoints(e) {
    allPoints.push({ x: e.pageX, y: e.pageY });
}

This way, trackPoints will start firing when the mouse is down and stop when it goes back up.

You may also want to add a if(e.which == 1) to the top of your mouseup and mousedown handlers so that they perform the bind for a left mouse button only, not middle or right buttons.

Answer 2

var X = [],
    Y = [],
    i = -1;
$("#dic").mouseup(function(e) {
    ++i;
    X[i] = e.pageX;
    Y[i] = e.pageY;
    // reset everything on mouseup
    X = [];
    Y = [];
    i = -1;
}).mousedown(function(e) {
    ++i;
    X[i] = e.pageX;
    Y[i] = e.pageY;
    console.log(X);
}).mousemove(function(e) {
    ++i;
    X[i] = e.pageX;
    Y[i] = e.pageY;
});

DEMO

Answer 3

var x = [], y = [], i = 0;

$("#dic").mouseup(function (e) {
    $('#status').html(e.pageX +', '+ e.pageY + ' up');
    x[i] = e.pageX;
    y[i++] = e.pageY;

    console.log(x);
    console.log(y);
});

$("#dic").mousedown(function (e) {
    $('#status').html(e.pageX +', '+ e.pageY + ' down');
    i = 0;
    x[i] = e.pageX;
    y[i++] = e.pageY;
});

$("#dic").mousemove(function (e) {
    $('#status').html(e.pageX +', '+ e.pageY + ' move');
    x[i] = e.pageX;
    y[i++] = e.pageY;
});

This will begin recording mouse positions on mousedown and you can see the output on the console on mouseup. Then you can calculate the distance as thecodeparadox described with the first and last items of the arrays, or any other points in between the start and end.

Code on JSFiddle