Question

I want to create a multi select box (click and drag at empty space then will have a blue div ), but the click and drag is inconsistent and i cant find out the problem.

try to drag from a empty space that is around the bottom right , top right or bottom left and you can see that the light blue box didnt actually start from the point where the mouse down

http://jsfiddle.net/wizztjh/jk4Uc/7/

Answer 1

In your code I changed

$(this).unbind().bind("mousemove" ,function(e){

to

$(this).bind("mousemove" ,function(e){    

The new code can be seen @ http://jsfiddle.net/jk4Uc/6/

EDIT

Try this http://jsfiddle.net/jk4Uc/10/ in this your dragging starts exactly from mouse down. I changed e.pageX to e.clientX.

EDIT

This is working precisely as you asked @ http://jsfiddle.net/jk4Uc/11/

Changed

var oriX = e.clientX, //<== Here
    oriY= e.clientY;  //<== Here
$("<div id='multiselectbox'></div>")
      .appendTo("#canvas")
      .css({
            top:oriY,  //<== Here
            left:oriX  //<== Here
       });

Hope this is what you are looking for.