How do I click the DIV and make it move in the right direction?

From a conceptual point of view (I will soon be beaten up with real code), I would register the coordinates of the mouse on MouseDown and compare them with the coordinates of the mouse on MouseUp to determine the angle of movement of this div (this will allow the DIV to continue moving in the right direction, even if MouseUp was close to DIV).

A simpler way would be to simply move the square to MouseUp coordinates (i.e. mouse coordinates don't matter much in a small DIV), but this will not work if MouseUp is very close to MouseDown.

In any case, use something like this answer ( How to make a div or object gradually move to the mouseclick point using javascript? ), Except for the MouseUp / MouseRelease click, ideally in the direction of the projected point (along the line between MouseDown and MouseUp at the given distance).

( + Page/Graph y, , mousedown/mouseup, fauxtrot , , , , " " , " " , , ).

: http://jsfiddle.net/9B9sA/

HTML

<div id="bluebox" 
  style="width:100px;
  height:100px;
  background-color:blue;
  position:absolute;
  left:300px;
  top:300px;"> </div>

jQuery ( jQuery )

    var startDownX, startDownY; 

    $(document).ready(function() {

    /* Stop default Firefox etc. drag */
    $(document).bind("dragstart", function() {
         return false;
    });

    /* Capture start of flings */
    $('#bluebox').mousedown(function (event) {
        startDownX = event.pageX;
        startDownY = event.pageY;
    });

    /* Work out fling direction on end of fling */
    $(document).mouseup(function(event){
        /* Page y-axis is different from graph */
        var rise = -(event.pageY - startDownY); 
        var run = event.pageX - startDownX;
        var newX = $('#bluebox').position().left;
        var newY = $('#bluebox').position().top;
        var distanceToFling = 100;

        if (run == 0 || Math.abs(rise/run) > 3) {
            if (rise > 0) {
              newY -= distanceToFling;
            } else if (rise < 0) {
              newY += distanceToFling;
            }
        }
        else {
            if (run > 0) {
                newX += distanceToFling;
                newY -= (rise/run) * distanceToFling;
            }
            else {
                newX -= distanceToFling;
                newY += (rise/run) * distanceToFling;
            }
        }

         $('#bluebox').animate({
             left: newX,
             top: newY
            }, 1000);
    }); });