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.