Jquery UI可排序切换问题

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

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

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

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

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

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

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

您需要使用无效选项,并在隐藏时禁用并启用目标:

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

A modified JSFiddle showing this working.

相关文章
相关标签/搜索