Jquery鼠标移动调整大小无效。

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;
}

演示

问题： 现在当我在.drag-me内移动鼠标时，我希望它可以增加/减少其大小。 但它并没有发生这种情况。为什么？ 我错在哪里了？

- kritya

Answer 1

我改变了：

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

到

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

看起来已经得到了所需的结果。

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

- Blazemonger

---

http://jsfiddle.net/kmEGF/30/进行了一些二维调整和最小尺寸的微调。 - Blazemonger

我认为这并没有产生期望的效果，因为一旦你开始拖动，宽度就会更新到你点击的位置... - Jeff

Answer 2

我已经更新了你的代码，使用.animate()而不仅仅是改变宽度，因为你可以根据鼠标位置的变化进行动画处理...

这里有一个实时示例： http://jsfiddle.net/kmEGF/31/ 以及更新后的脚本：

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;
});

- Jeff

---

好的，如果这不是你想要的效果，请告诉我。 - Jeff

与给定的相同，但没有动画。 - kritya