jQueryUI：只允许在其自己的父级内进行排序，而不允许高于或低于此级别

基本上使用列表结构，我试图使每个li在它自己的级别内可排序，但不在其他级别内。因此，如果我向下拖动

编号1

，它将不会与任何sub ul或li混合，而只会位于

编号2

下方。这就是我到目前为止所拥有的，虽然它确实阻止了李彦宏超越它的水平，但它并没有阻止李彦宏在它的水平之下混合。例如，现在我可以在

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>

第一

1.1号
1.2号


二号

2.1号
2.2号

第2.2.1条
第2.2.2条

你的HTML和选择器都真的搞砸了。我已经帮你清理好了。请注意，您需要为不同级别的排序表定义不同的类名，或者至少确保它们不是由同一选择器返回的。查看此链接以了解固定的实现：

您还可以调整选择器，这样就不必继续定义类名并避免整个混乱，如：

如另一个答案中所述，如果您想麻烦地将css类应用于所有要排序的列表，您也可以使用items选项为单个子列表打开或关闭此选项（请注意，我在大多数项目上关闭了该类，以便您可以查看其工作方式）：