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

Question

基本上使用列表结构,我试图让每个li在它自己的级别内排序,但不能在其他级别内排序.因此,如果我拖下来Number 1,它将不会与任何sub 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/