Custom div resize with strange behavior

Question

When mouse click on the div and start dragging, another absolute div is built on top. But when I decrease the width and height, the div blinks. I have noticed that the initial css proporties "top" and "left" causes this;

With "top" and "height" != 0 http://jsfiddle.net/mCupS/

Top: 0 and Left: 0 http://jsfiddle.net/mCupS/1/

Is this wrong? Am I missing something?

$(selection_div).width(e.offsetX - xDown)
$(selection_div).height(e.offsetY - yDown)

Answer 1

I don't know why but event.offsetX is not reliable.

I've fixed your issue by listening individually to mousedown , mousemove and then mouseup :

 $('#container').on('mousedown', function(mde){
        $('#container').on('mousemove', function(mme){
            $(selection_div).width(mme.pageX - mde.pageX)
            $(selection_div).height(mme.pageY - mde.pageY)
        });
        $('#container').on('mouseup', function(mue){
            $('#container').off('mousemove');            
        });                    
    });

Demo here: http://jsfiddle.net/mCupS/2/