Jquery UI嵌套Sortables與多個UL

我試圖通過多個UL實現jquery UI nested sortables。下面是密碼，Jquery UI嵌套Sortables與多個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>

到目前爲止好，得到了預期的結果。現在我的要求是，從UL-1不應該排序UL-2 and UL-3也從UL-2,UL-3不應該排序在一起。希望你明白的要求。有沒有可能做到這一點。請在此建議。

來源

2012-04-17 mymotherland

嘗試用你的主要的UL和遺留物僅用於可排序的元素。

注：

我添加不同的類名到您的HTML部分使用這個解決方案。

來源

2012-04-18 09:21:10 Elamurugan

謝謝，它的工作 – mymotherland 2012-04-18 09:26:00

你必須設置「容器」，例如：這樣

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

所以，你的目標將永遠

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

欲瞭解更多信息，check this.

來源

2012-04-17 16:29:17

試過了，仍然沒有找到確切的結果... – mymotherland 2012-04-18 05:49:55

Jquery UI嵌套Sortables與多個UL

回答

相關問題