Jquery UI可排序+切换问题

Question

我正在尝试实现一个简单的连接排序,display可以由用户切换.

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

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

我在这里遇到了一个问题.如果折叠可排序(目标)并执行拖动操作,则可排序停止工作.

见http://jsfiddle.net/9hGrs/12/

1. 单击切换按钮以隐藏可排序
2. 将任何项目从源拖动到页面上的任何位置,然后释放它(即模拟无效的拖放)
3. 再次单击切换按钮以显示可排序
4. 现在,当您尝试将项目从源项拖放到可排序项时,它不接受可拖动项.

知道我在这里做错了吗？我很感激任何帮助.谢谢!

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显示这个工作.