单击时禁用鼠标移动答案

【问题标题】：Disable mousemove on click单击时禁用鼠标移动
【发布时间】：2011-01-03 19:33:50
【问题描述】：

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

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

在鼠标按下时，它应该通过移动鼠标来启动拖动效果，之后如果我想将框停靠/放到我想要的位置，我点击它应该禁用移动但如果我点击它，它不会停止移动 - 只是一直跟随我的鼠标。如何停止拖拽？

【问题讨论】：

标签： jquery drag-and-drop

【解决方案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 1.4.3+ 中，.live() 处理程序可以更简洁一些：

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

顺便说一句，它似乎页面中有多个id="box" 元素...确保在这些情况下使用类，在此代码中$(this).parent('#box') 将改为$(this).closest('.box') .

【讨论】：

没有你什么都做不了。谢谢。

【解决方案2】：

尝试添加

$(window).unbind('mousemove')

在您的点击事件中。

【讨论】：

【解决方案3】：

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

但实际上您应该为事件命名，以便您只取消绑定适当的事件侦听器。

绑定：$(window).bind('mousemove.dragging', function(){});

解除绑定：$(window).unbind('mousemove.dragging', function(){});

【讨论】：