Javascript 具有多个UL的Jquery UI嵌套排序表_Javascript_Jquery_Jquery Ui

Javascript 具有多个UL的Jquery UI嵌套排序表

javascript jquery jquery-ui

Javascript 具有多个UL的Jquery UI嵌套排序表,javascript,jquery,jquery-ui,Javascript,Jquery,Jquery Ui,我正在尝试用不止一个UL来实现。下面是代码 <html> <head> <script type="text/javascript" src="js/jquery-1.5.2.js"></script> <script type="text/javascript" src="js/jquery-ui-1.8.16.custom.js"></script> <script type=

我正在尝试用不止一个UL来实现。下面是代码

   <html>
    <head>
    <script type="text/javascript" src="js/jquery-1.5.2.js"></script>
    <script type="text/javascript" src="js/jquery-ui-1.8.16.custom.js"></script>
    <script type="text/javascript">
    $(document).ready(function(){   
    $("#example5 ul").sortable({
                    connectWith: "#example5 ul",
                    placeholder: "ui-state-highlight"
    });

    $("span.item-controls").click(function(){
        //alert($(this).parent().next('div').attr('class'))
        var v = $(this).parent().next('div.panel');
        v.slideToggle("slow");
      });

    });
    </script>
    <style>
    ul { 
        min-height:10px; 
        }
    li {
        margin:5px;
        width:auto;
        border:1px solid #000;
        list-style-type:none;
        cursor:move;
    }

    #example5 {
          display: inline-block;
          float: left;
          position: relative;
          width:900px;
    }
    .fright
    {
          float:right;
    }
    .item-controls {
          cursor: pointer;
          font-size: 12px;
          position: relative;
          right: 20px;
          top: 5px;
          background: url("images/arrows.png") no-repeat scroll transparent;
          xborder: 1px solid #000;    
          background-position:3px 0px;
          width:20px;
          height:15px;
    }.ui-sortable{
    margin:0px;padding:0px;
    }
    .ahead
    {
         margin:0px;
    }
    div.panel
    {
        height:auto;
        display:none;
    }
    div.panel
    {
        margin:0px;
        text-align:center;
        background:#e5eecc;
        border:solid 1px #c3c3c3;
    }
    </style>
    </head>

    <body>
    <div id="example5"><!--UL1-->
        <ul style="width:32%;float:left;" class="navigation">
             <li ><p class="ahead"><span class="heading">Item 1 </span><span class="fright item-controls"></span></p>
                     <div class="panel">
                        <p>This is Item 1</p>
                    </div>
                <ul>
                    <li >
                    <p class="ahead"><span class="heading">Item 1 1</span><span class="fright item-controls"></span></p>
                     <div class="panel">
                        <p>This is Item 1 1</p>              
                    </div>              
                    <ul></ul></li>
                    <li >Item 1 2<ul></ul></li>
                    <li >Item 1 3<ul></ul></li>
                 </ul>

             </li>
             <li >
             <p class="ahead"><span class="heading">Item 2 </span><span class="fright item-controls"></span></p>
                    <div class="panel">
                        <p>This is Item 2</p>       
                    </div>       
             <ul><li >Item 2 1<ul></ul></li></ul>
             </li>
             <li >Item 3<ul></ul></li>
             <li >Item 4<ul></ul></li>
        </ul>
    <!--UL2-->
        <ul style="width:32%;float:left;"  class="navigation2">
             <li ><p class="ahead"><span class="heading">Item 1 </span><span class="fright item-controls"></span></p>
                     <div class="panel">
                        <p>This is Item 1</p>
                    </div>
                <ul>
                    <li >
                    <p class="ahead"><span class="heading">Item 1 1</span><span class="fright item-controls"></span></p>
                     <div class="panel">
                        <p>This is Item 1 1</p>              
                    </div>              
                    <ul></ul></li>
                    <li >Item 1 2<ul></ul></li>
                    <li >Item 1 3<ul></ul></li>
                 </ul>

             </li>
             <li >
             <p class="ahead"><span class="heading">Item 2 </span><span class="fright item-controls"></span></p>
                    <div class="panel">
                        <p>This is Item 2</p>       
                    </div>       
             <ul><li >Item 2 1<ul></ul></li></ul>
             </li>
             <li >Item 3<ul></ul></li>
             <li >Item 4<ul></ul></li>
        </ul>
<!--UL3-->
           <ul style="width:32%;float:left;"  class="navigation3">
             <li ><p class="ahead"><span class="heading">Item 1 </span><span class="fright item-controls"></span></p>
                     <div class="panel">
                        <p>This is Item 1</p>
                    </div>
                <ul>
                    <li >
                    <p class="ahead"><span class="heading">Item 1 1</span><span class="fright item-controls"></span></p>
                     <div class="panel">
                        <p>This is Item 1 1</p>              
                    </div>              
                    <ul></ul></li>
                    <li >Item 1 2<ul></ul></li>
                    <li >Item 1 3<ul></ul></li>
                 </ul>

             </li>
             <li >
             <p class="ahead"><span class="heading">Item 2 </span><span class="fright item-controls"></span></p>
                    <div class="panel">
                        <p>This is Item 2</p>       
                    </div>       
             <ul><li >Item 2 1<ul></ul></li></ul>
             </li>
             <li >Item 3<ul></ul></li>
             <li >Item 4<ul></ul></li>
        </ul>
    </div>
    </body>
    </html>


$（文档）.ready（函数（）{
$（“#示例5 ul”）。可排序({
连接到：“#示例5 ul”，
占位符：“ui状态突出显示”
});
$（“span.item控件”）。单击（函数（）{
//警报（$（this.parent（）.next（'div'）.attr（'class'））
var v=$（this.parent（）.next（'div.panel'）；
v、 滑动切换（“慢”）；
});
});
ul{
最小高度：10px；
}
李{
保证金：5px；
宽度：自动；
边框：1px实心#000；
列表样式类型：无；
光标：移动；
}
#例5{
显示：内联块；
浮动：左；
位置：相对位置；
宽度：900px；
}
恐惧
{
浮动：对；
}
.项目控制{
光标：指针；
字体大小：12px；
位置：相对位置；
右：20px；
顶部：5px；
背景：url（“images/arrows.png”）无重复滚动透明；
xborder:1px固体#000；
背景位置：3px0px；
宽度：20px；
高度：15px；
}.ui可排序{
边距：0px；填充：0px；
}
向前地
{
边际：0px；
}
分区小组
{
高度：自动；
显示：无；
}
分区小组
{
边际：0px；
文本对齐：居中；
背景：#e5eecc；
边框：实心1px#c3c3；
}

第1项
这是项目1


第1项
这是第1项

第12项
第13项



第2项
这是第2项
第2项第1项

第3项
第4项


第1项
这是项目1


第1项
这是第1项

第12项
第13项



第2项
这是第2项
第2项第1项

第3项
第4项


第1项
这是项目1


第1项
这是第1项

第12项
第13项



第2项
这是第2项
第2项第1项

第3项
第4项

到目前为止还不错，取得了预期的效果。现在我的要求是，从

UL-1

不应与

UL-2和UL-3

一起排序，也从

UL-2，UL-3

不应一起排序。希望您理解此要求。有可能吗。请给出建议。

您必须设置“容器”，例如：

$("#example5 ul").sortable({
                connectWith: "#example5 ul",
                placeholder: "ui-state-highlight",
                containment: "#selector"
});

有关详细信息，请尝试使用此方法

$("#example5 ul").sortable({
    connectWith: "#example5 ul.navigation *",
    placeholder: "ui-state-highlight"
});

所以你的目标永远是你的主要UL，剩下的只是可排序的元素

注:

为了使用此解决方案，我向html部件添加了不同的类名