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

基本上使用列表结构,我试图让每个li在它自己的级别内排序,但不能在其他级别内排序.因此,如果我拖下1号,它将不会与任何sub ul或li混合,但只会低于2号.这是我到目前为止所做的,虽然它确实阻止了li的上升到它的水平,它不会阻止李的混合低于它的水平.例如,我现在可以在Number 2.1和Number 2.2之间移动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>

解决方法

您的HTML和选择器都搞砸了.我已经在这里为你清理过了.请注意,您需要为不同的sortables级别定义不同的类名,或者至少确保它们不会被同一个选择器返回.查看此链接以获取固定实施：
http://jsfiddle.net/GMUbj/

您还可以调整选择器,这样您就不必继续定义类名并完全避免这种混乱,如：http://jsfiddle.net/HWmz3/

作为另一个答案注意到你也可以把这个打开或关闭使用中的项目选择,如果你不想打扰到一个CSS类适用于所有要排序的名单中的单个子列表(请注意,我离开了班级被关闭的最的项目,以便你可以看到它是如何工作的)：http://jsfiddle.net/DnaBs/