jquery resize on mousemove not working

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;
开发者_JS百科}

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 ?

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/

I've updated your code to use .animate() instead of just changing the width, because you can animate with whatever the change in mouse position was...

Here's a live example: http://jsfiddle.net/kmEGF/31/

and the updated script:

var clicking = false;
var lastx;

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

$(document).mouseup(function(e){
    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);
    $(this).stop(true,true).animate({'width': '+='+change})
    $('.cords').html('x:'+e.pageX+' y: '+e.pageY);
    lastx= e.pageX;
});