無効に私はドラッグで実験していますクリック

Question

上のMouseMove「n」をドロップすると、これはここに私のコードです：I場合はマウスダウンで

$('.box-title').live('mousedown click', function(e) 
{ 
    var self = $(this); 
    var Box = self.parent('#box'); 

    if(e.type == 'mousedown') 
    { 
     $(window).mousemove(function(e) 
     { 
      Box.css({ cursor: 'move', top: e.pageY - 15, left: e.pageX - 125 }); 
     }); 
    } 
    else if(e.type == 'click') 
    { 
     Box.css({ cursor: 'default', top: e.pageY - 15, left: e.pageX - 125 }); 
    } 
}); 

、それはその後、マウスを動かすことにより、ドラッグ効果を開始する必要がありますそれをクリックすると動きは止まらず、ただマウスをたどり続けるだけです。どのようにドラッグを止めることができますか？

Answer 1

あなたは、たとえば、現在接続まだあるmousemoveハンドラをバインド解除する必要があります。

function setPos(e) { 
    //can be $('#box') in this case... 
    $(this).parent('#box').css({ cursor: 'move', top: e.pageY - 15, left: e.pageX - 125 }); 
}  
$('.box-title').live('mousedown click', function(e) { 
    if(e.type == 'mousedown') { 
     $(window).mousemove(setPos); 
    } 
    else if(e.type == 'click') { 
     $(window).unbind('mousemove', setPos); 
    } 
}); 

それとも、jQueryのではハンドラは少しクリーナーすることができ.live()こと1.4.3+：

$('.box-title').live({ 
    mousedown: function() { 
    $(window).mousemove(setPos); 
    }, 
    click: function() { 
    $(window).unbind('mousemove', setPos); 
    } 
}); 

---

脇に、が表示されますあなたは複数のページの要素...これらの場合は必ずクラスを使用してください。このコードでは$(this).parent('#box')は$(this).closest('.box')となります。

Answer 2

は、あなたのクリックイベントで

$(window).unbind('mousemove')

を追加してみてください。

Answer 3

else if(e.type == 'click') 
{ 
    $(window).unbind('mousemove') 
} 

本当に適切なイベントリスナーのバインドを解除するだけで、イベントの名前を付ける必要があります。

バインド：$(window).bind('mousemove.dragging', function(){});

バインド解除：$(window).unbind('mousemove.dragging', function(){});