使用 jquery 可排序的子 li 不与父 ul 一起移动

Question

我已经嵌套了 ul，第二个 ul 工作正常，但第一个和第三个 ul 不能正常工作，第一个 ul li 是可排序的，但子级不能与父级排序，同样第三个 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 个级别，因此您应该只有 3 ul。对于每个 ul，您应该添加 class="sortable-nested ui-sortable"。 更正：第一级（grand-ul 跟在 li 之后），对于第二级，应在所需的 <li> <ul class="parent-ul"> 内添加另一个 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>

我希望这是有道理的。随意问任何问题。