javascript - 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.