Question

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

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

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

我在这里遇到了一个问题。如果折叠了可排序（目标），并执行了拖动操作，则可排序停止工作。

请参阅http://jsfiddle.net/9hGrs/12/

点击切换按钮隐藏可排序的
将任何项目从源文件拖到页面上的任意位置，然后释放它（即模拟无效的删除）
再次点击切换按钮以显示可排序的
现在，当您尝试将项目从源项拖放到可排序项时，它不接受可拖动项。

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

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

A modified JSFiddle showing this working

Answer 2

jquery 1.6.1 / jquery-ui 1.8.14。

不会发生此问题

更新了小提琴：http://jsfiddle.net/9hGrs/16/

Jquery UI可排序+切换问题

2 个答案: