子liはjquery sortableを使用して親ulと一緒に動いていません

Question

私は入れ子になっていますul、2番目のulはうまく働いていますが、最初と3番目のulはうまくいきません。最初のul liはソート可能ですが、同様に3番目のul liはソートできません。

$(function() { 
 
    $(".sortable_nested").sortable({ 
 
     connectWith: ".ui-state-default", 
 
     placeholder: "ui-state-highlight" 
 
    }).disableSelection(); 
 
});

#sortable { 
 
    list-style-type: none; 
 
    margin: 0; 
 
    padding: 0; 
 
    width: 60%; 
 
} 
 

 
#sortable li { 
 
    margin: 0 3px 3px 3px; 
 
    padding: 0.4em; 
 
    padding-left: 1.5em; 
 
    font-size: 1.4em; 
 
    height: 18px; 
 
} 
 

 
#sortable li span { 
 
    position: absolute; 
 
    margin-left: -1.3em; 
 
} 
 
input[type=text], select { 
 
    width: 100%; 
 
    /*padding: 12px 20px;*/ 
 
    margin: 5px 0; 
 
    display: inline-block; 
 
    border: 1px solid #ccc; 
 
    border-radius: 4px; 
 
    box-sizing: border-box; 
 
} 
 

 
input[type=submit] { 
 
    width: 100%; 
 
    background-color: #4CAF50; 
 
    color: white; 
 
    /*padding: 14px 20px;*/ 
 
    margin: 5px 0; 
 
    border: none; 
 
    border-radius: 4px; 
 
    cursor: pointer; 
 
} 
 

 
input[type=submit]:hover { 
 
    background-color: #45a049; 
 
} 
 
.vl { 
 
    border-left: 6px solid green; 
 
    height: 500px; 
 
    margin-left : 50%; 
 
} 
 

 
.ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default, .ui-button, html .ui-button.ui-state-disabled:hover, html .ui-button.ui-state-disabled:active { 
 
    border: 0px solid #c5c5c5 !important; 
 
    background: #fff !important; 
 
    font-weight: normal; 
 
    color: #454545; 
 
}

<script src="https://code.jquery.com/jquery-1.12.4.js"></script> 
 
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> 
 
<ul class="sortable_nested grand_ul ui-sortable"> 
 
    <li class="ui-state-default ui-sortable-handle"> 
 
    <input type="text"> 
 
    </li> 
 

 
    <li class="ui-state-default"><input type="text"></li> 
 
    <li class="ui-state-default"><input type="text"></li> 
 
    <ul class="parent_ul"><li class="ui-state-default"><input type="text"></li></ul> 
 
    <ul class="parent_ul"><li class="ui-state-default"><input type="text"></li></ul> 
 
    <ul class="parent_ul"><li class="ui-state-default"><input type="text"></li> 
 
    <ul class="child_ul"><li class="ui-state-default"><input type="text"></li></ul>  <ul class="child_ul"><li class="ui-state-default"><input type="text"></li></ul>  <ul class="child_ul"><li class="ui-state-default"><input type="text"></li></ul> </ul> 
 
</ul>

フィドルリンク： - https://jsfiddle.net/s8tdqoog/3/

Answer 1

親愛なるあなたは次のようにミスをしている： あなたはわずか3 ULを持っている必要があり、そのためにあなたは、3つのレベルがあります。それぞれのulにはclass="sortable-nested ui-sortable"を追加する必要があります。 訂正のために：第1レベル（liに続くgrand-ul）、第2レベルのために、所望の範囲内にもう1つのulが追加されるべきである。<li> <ul class="parent-ul">。新しい弾を必要とするたびにulを作成しないでください。私は、これは理にかなって願っています

<script src="https://code.jquery.com/jquery-1.12.4.js"></script> 
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> 
    <ul class="sortable_nested grand_ul ui-sortable"> 
     <li class="ui-state-default ui-sortable-handle"> 
      <input type="text" value="0"> 
     </li> 
     <li class="ui-state-default"><input type="text" value="1"></li> 

    <!-- Starting <li> of grand-ul with value 2 --> 
     <li class="ui-state-default"><input type="text" value="2"> 
      <!-- Starting 2nd level <ul> of value 3,4,5 inside li of grande-ul--> 
      <ul class="parent_ul sortable_nested ui-sortable"> 
       <li class="ui-state-default"><input type="text" value="3"></li> 
       <li class="ui-state-default"><input type="text" value="4"></li> 
       <li class="ui-state-default"><input type="text" value="5"> 
         <ul class="child_ul sortable_nested ui-sortable"> 
         <li class="ui-state-default"><input type="text" value="6"></li> 
         <li class="ui-state-default"><input type="text" value="7"></li> 
         <li class="ui-state-default"><input type="text" value="8"></li> 
         </ul> 
       </li> 
      </ul> 
     </li> <!-- ending <li> of grand-ul with value 2 --> 
    </ul> 

：下のよう

正しいコードです。何か質問をしてください。