jquery resize on mousemove not working

Question

I have this js:

var clicking = false;

$('.drag-me').mousedown(function(){
    clicking = true;
    $('.status').text('mousedown');
});

$(document).mouseup(function(){
    clicking = false;
    $('.status').text('mouseup');
    $('.status').text('click released, no more move event');
})

$('.drag-me').mousemove(function(e){
    if(clicking == false) return;

    // Mouse click + moving logic here
    $('.status').text('mouse moving');
    var change=lastx-e.pageX;
    var lastx= e.pageX;
    $(this).css('width',$(this).width+change+'px')
    $('.cords').html('x:'+e.pageX+' y: '+e.pageY);
});

And html:

<div class="drag-me">Drag me</div>
<div class="status">Nothing</div>
<div class="cords">Cords</div>

css:

.drag-me {
    background:blue;
    width:100px;
    height:30px;
}

demo

QUESTION: Now when i move the mouse inside .drag-me i want it to increase/decrease its size. But it doesnt happens so. Why ? Where have i been going wrong ?

Answer 1

I changed:

$(this).css('width',$(this).width+change+'px')  

to

$(this).width(e.pageX);

And seemed to get the desired result.

http://jsfiddle.net/kmEGF/26/