jQuery UI : Only allow sortable within its own parent level, 且不高于或低于

Question

基本上使用列表结构，我试图使每个 li 在其自己的级别内可排序，但不能在其他级别内排序。因此，如果我向下拖动 Number 1，它不会与任何子 ul 或 li 混合，而只会位于 Number 2 下面。这就是我到目前为止所拥有的，虽然它确实阻止了 li's 高于它的水平，但它并不能阻止 li's 混合到低于它的水平。例如，现在我可以在 Number 2.1 和 Number 2.2

之间移动 Number 1

$(".sortable2, .sortable2 ul").sortable({
     opacity: 0.5,
        stop:function(i){
            $.ajax({
                type: "GET",
                url: "?",
                data: $(this).sortable("serialize")
            });
        }
});



$(".sortable2").selectable();
$(".sortable2").disableSelection();


$('.sortable2').bind('mousedown', function(e) {
     e.stopPropagation();
});

这是 ul li 结构:

<ul class="sortable2">
    <li>Number 1
        <ul class="sortable2">
            <li>Number 1.1</li>
            <li>Number 1.2</li>
        </ul>
    <li>
    <li>Number 2
        <ul class="sortable2">
            <li>Number 2.1</li>
            <li>Number 2.2
                <ul class="sortable2">
                    <li>Number 2.2.1</li>
                    <li>Number 2.2.2</li>
                </ul>
            </li>
        </ul>
    <li>
</ul>

Answer 1

你的 HTML 和选择器都搞砸了。我这里已经帮你清理干净了。请注意，您需要为不同级别的可排序定义不同的类名，或者至少确保它们不是由同一选择器返回。查看此链接以获取固定的实现: http://jsfiddle.net/GMUbj/

您还可以调整选择器，这样您就不必继续定义类名并完全避免整个困惑，如: http://jsfiddle.net/HWmz3/

正如另一个答案中所述，如果您想将 css 类应用于您想要排序的所有列表，您也可以使用 items 选项为单个子列表打开或关闭此功能(请注意，我将类打开关闭大多数项目，以便您可以看到它是如何工作的):http://jsfiddle.net/DnaBs/