Jquery UI可排序+切换问题

Question

我正在尝试实现一个简单的连接排序，用户可以切换其显示。

$('#toggle').click(function(){
    $('#content').toggle();
});

$('#target').sortable();
$('#source div').draggable({
    connectToSortable: '#target',
    helper: 'clone'
});

我遇到了一个问题。如果可排序的目标被折叠，并进行拖动操作，那么可排序将停止工作。

请参见 http://jsfiddle.net/9hGrs/12/ 步骤如下：

1. 点击切换按钮隐藏可排序
2. 从源中拖动任何项目到页面上的任何地方，并释放它（即模拟无效放置）
3. 再次单击切换按钮以显示可排序
4. 现在，当您尝试从源拖放项目到可排序时，它不会接受可拖动的项目。

有什么想法吗？我很感激任何帮助。谢谢！

- lo5

---

有趣的是，我只让它在无效的放置项上失败了。 - stef

Answer 1

你需要使用无效的选项，在隐藏时禁用和启用目标：

$('#toggle').click(function(){
    if($('#content').is(":visible")) {
      $( "#target" ).sortable( "option", "disabled", true );
      $("#content").hide();
} else {
      $( "#target" ).sortable( "option", "disabled", false );
      $("#content").show();            
    }

});

$('#target').sortable();
$('#source div').draggable({
    connectToSortable: '#target',
    helper: 'clone',
    revert: 'invalid'
});

这是一个修改过的JSFiddle示例，展示了它的工作原理。.

- stef

Answer 2

这个问题在jquery 1.6.1 / jquery-ui 1.8.14中没有出现。

更新后的fiddle链接：http://jsfiddle.net/9hGrs/16/

- flyingpython