child li is not moving with parent ul using jquery sortable

Question

I have nested ul,the second ul working fine but the first and third ul is not working okay, the first ul li is sortable but the child is not sorting with parent, similarly the third ul li is not sortable.

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

fiddle link:- https://jsfiddle.net/s8tdqoog/3/

Answer 1

Dear you are making mistakes as follow: You have 3 levels, for that you should have 3 ul only. With each ul you should add class="sortable-nested ui-sortable". For correction: first level (grand-ul following with li), for second level another ul should be added within the desired <li> <ul class="parent-ul">. Don't create ul each time you need a new bullet.

Correct code is as under:

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

I hope this make sense. Feel free t ask any question.