jQuery UI：嵌套的可排序错误

Question

感谢阅读。

两个问题：

我正在创建一个任务列表类型的系统，它将使用嵌套的可排序列表。

这是一些非常基本的演示代码：

<script>
    $(function(){

        $('.sortable_test > li').attr('style', 'border:1px solid red; padding:3px; margin:2px;');

        $('.sortable_test').sortable({
            distance: 5,
            connectWith: ['.sortable_test'],
            placeholder: 'ui-state-highlight',
            forcePlaceholderSize: true
        });
    })
</script>
<ul class='sortable_test'>

    <li>
        Item
        <ul class='sortable_test'>

            <li>
                Item

            </li>
            <li>
                Item
            </li>
            <li>
                Item
            </li>
            <li>
                Item
            </li>
            <li>
                Item
            </li>
            <li>
                Item
            </li>
            <li>
                Item
            </li>
        </ul>
    </li>
    <li>
        Item
    </li>
    <li>
        Item
    </li>
    <li>
        Item
    </li>
    <li>
        Item
    </li>
    <li>
        Item
    </li>
    <li>
        Item
    </li>
</ul>

问题 1：

如果您尝试从嵌套子列表中拖动一个项目，在该列表中，它会非常有效。如果您尝试重新排序主列表中的项目，也是如此。

但是，如果你想将一个项目从子列表拖到主列表，或者反之亦然，它可以做到，但占位符不会立即出现，它会尝试将它保持在同一个列表中。您必须将它拖到所有地方，然后它才会注册到您所在的列表中。

最终，它似乎意识到您想要进入或退出子列表，但它非常古怪。

我在想也许对于哪个列表具有优先权感到困惑，因为从技术上讲，您在两者上拖拉。

因此，如果您尝试将一个项目从主列表拖动到子列表，它会将整个子列表视为单个项目并尝试将其移过。

有人遇到过吗？有什么想法吗？也许有一种方法可以指定哪个列表具有优先级，或者让插件更清楚您对哪个列表感兴趣？

问题 2：

如果您抓住第一个项目，即带有子列表的大项目，并尝试对其重新排序，有时它会尝试放入自己的子列表中，导致错误并消失。在拖动开始之前，我可以通过添加一个句柄并在句柄单击时隐藏子列表（使其尺寸更小，从而解决问题）来解决这个问题，但是其他人可以想办法解决这个问题吗？

似乎问题在于拖动高度较大的项目。

浏览器：

这一切都在 Firefox 中。 IE 似乎根本无法处理嵌套的 sortables。似乎没有办法从子列表中获取项目。

谢谢！

Answer 1

检查这个错误：http://dev.jqueryui.com/ticket/4333

Answer 2

我遇到了类似的问题，我也向 JQuery UI 提交了一个错误并在此处发布。我有一个演示，我在其中使用了几个额外的可排序选项，它实际上在 IE 中似乎可以正常工作，但你不能拖出 FF 中的嵌套列表。

$(".myList").sortable({ connectWith: ".myList", appendTo: 'body', helper: 'clone', items: 'li' });

Answer 3

很抱歉恢复这个线程。只是想为偶然发现此线程的其他用户发帖。

我遇到了与 Eli 完全相同的问题——使用 Chrome 8.x。

Eli——为了解决问题 2，我从被拖动元素的所有子列表中删除了“myList”类。我将其更改为“mySubList”，然后在被拖动的列表项上调用 .sortable('refresh') 。最后，一旦拖动完成，我将其改回（并再次调用刷新）。这可以防止父项被放入其自己的子列表之一并导致错误。你不能在 sortable 的 start 事件中调用 sortable('refresh') （它对我不起作用），所以你必须创建自己的 'click' 事件，在 sortable 事件之前完成所有这些工作开始射击。

我有一个句柄，所以当用户点击该句柄时，我就完成了所有这些工作。

代码（未经测试，但即使它不起作用你也会明白的）：

$('.sortable_test').sortable({
   distance: 5,
   connectWith: ['.sortable_test'],
   placeholder: 'ui-state-highlight',
   forcePlaceholderSize: true
}).find('li').click(function() {
   $(last_selected_li).find('.mySubList').removeClass('mySubList').addClass('myList').end().sortable('refresh');
   $(this).find('.myList').removeClass('myList').addClass('mySubList').end().sortable('refresh');
});