Jquery UI 嵌套了具有多个 UL 的 Sortables

Jquery UI nested Sortables with more than one UL

本文关键字：UL Sortables UI 嵌套 Jquery 更新时间：2023-09-26

我正在尝试使用多个UL实现jquery UI嵌套可存储。下面是代码，

   <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>

到目前为止一切顺利，得到了预期的结果。现在我的要求是，从UL-1不应该与UL-2 and UL-3也从UL-2,UL-3一起排序。希望您了解要求。有没有可能这样做。请就此提供建议。

尝试使用这种方式

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

因此，您的目标将始终是您的主要 UL，并且仅针对可排序的元素。

注意：

我为您的 html 部分添加了不同的类名以使用此解决方案。

你必须

设置"容器"，例如：

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

有关更多信息，请查看此内容。