Question

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

之间移动Number 2.2

$(".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/

jQuery UI：仅允许在其父级别内进行排序，而不是在上方或下方

1 个答案: