Question

我有这个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);
});

和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

问题：现在，当我在.drag-me内移动鼠标时，我希望它增加/减小它的大小。但事实并非如此。为什么？我哪里出错？

Answer 1

我改变了：

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

到

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

似乎得到了理想的结果。

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

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

jquery调整大小，鼠标移动不起作用

2 个答案: