Jquery UI 可排序 + 切换问题答案

【问题标题】：Jquery UI Sortable + Toggle ProblemJquery UI 可排序 + 切换问题
【发布时间】：2011-03-05 06:34:24
【问题描述】：

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

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

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

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

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

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

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

【问题讨论】：

有趣的是，我让它只在无效掉落的项目上失败。

标签： jquery jquery-ui jquery-ui-sortable

【解决方案1】：

需要使用invalid选项，并在隐藏时禁用和启用目标：

$('#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.

【讨论】：

【解决方案2】：

jquery 1.6.1 / jquery-ui 1.8.14 不会出现此问题。

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

【讨论】：