jQuery sortable() 在 $(document).unbind('mousemove') 之后不起作用

Question

jQuery Sortable() 运行良好，如果我尝试销毁和创建可排序对象，也运行良好。 但如果尝试$(document).unbind('mousemove') 并重新创建可排序的，它只能工作一次，然后永远不会工作。 我知道我可以更改代码；但我想知道为什么。

这是下面的代码，也在 jsfiddle (http://jsfiddle.net/webjjin/YJEf5/)

<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css">
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>

<div id="container"> 
<ul id="sortable">
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
  <li>Item 4</li>
  <li>Item 5</li>
</ul>
</div>
<button id="btn">Destroy and create</button>
<button id="unbind">Unbind</button>

<script>$("#sortable").sortable();</script>
<script>
var html = $('#container').html();
$('#btn').click(function(){
    $("#sortable").sortable('destroy');
    $('#container').empty();
    setTimeout(function(){
        $('#container').append(html);
        
        $("#sortable").sortable();
    }, 500);
});
$('#unbind').click(function(){
    jQuery(document).unbind('mousemove').unbind('mouseup');
})
</script>

Answer 1

终于找到原因了。

在 jQuery-ui 文件中。有这个代码。

var mouseHandled = false;
$( document ).mouseup( function() {
mouseHandled = false;
});

和_mouseDown函数检查这样，

if( mouseHandled ) { return; }

这就是为什么如果尝试 jQuery(document).unbind('mouseup')，可排序小部件不起作用，包括其他 jquery-ui 小部件。

谢谢大家。

Answer 2

使用此代码，

jQuery(document).unbind('mousemove').unbind('mouseup');

您正在删除页面上的 ALL mousemove 和 mouseup 事件侦听器，这对于 jQuery 可排序 至关重要。它用于跟踪拖动元素悬停或放下的位置等功能。所以解除绑定会破坏整个过程。

如果你想解除绑定这些事件监听器，使用特定的选择器：

$('#test').unbind('mousemove').unbind('mouseup');