禁用mousemove点击 [英] Disable mousemove on click

问题描述

我正在尝试拖拽，这是我的代码：

  $（'。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}）; 
} 
}）; 
  

在mousedown上，应该通过移动鼠标来启动拖动效果，之后如果我要停靠/放在我想要它的盒子，我点击它应该禁用移动，但如果我点击它，它不会停止移动 - 只是继续跟随我的鼠标。你如何阻止拖动？

解决方案

你需要解除绑定 mousemove

  function setPos（e）{$ b在这种情况下，$ b //可以是$（'＃box'）... 
 $（this）.parent（'＃box'）。css（{cursor：'move'，top：e.pageY -  15，左：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 1.4.3+中， .live（）处理程序可以有点清洁：

  $（'。box-title'）。live b $ b mousedown：function（）{
 $（window）.mousemove（setPos）; 
}，
 click：function（）{
 $（window）.unbind 'mousemove'，setPos）; 
} 
}）; 
  





---

除此之外，它你有多个 id =box元素在页面...确保使用类在这些情况下，在这个代码 $ （这个）.parent（'＃box'）将是 $（this）.closest（'。box'） >

I'm experimenting on a drag 'n' drop, this is my code here:

$('.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 });
    }
});

On mousedown, it should initiate the dragging effect by moving the mouse, after that if I want to dock/drop the box where I want it to me, I click on it it should disable the moving but if I click on it, it doesn't stop moving - just keeps following my mouse. How can you stop the dragging?

解决方案

You need to unbind the mousemove handler which is still attached currently, for example:

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

Or, in jQuery 1.4.3+ that .live() handler can be a bit cleaner:

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

---

As an aside, it appears you have multiple id="box" elements in the page...make sure to use classes in those cases, in this code $(this).parent('#box') would be $(this).closest('.box') instead.

这篇关于禁用mousemove点击的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！