Question

我有嵌套ul，第二个ul工作正常，但是第一个和第三个ul工作不正常，第一个ul li是可排序的，但是孩子没有用parent排序，类似的第三个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"。对于更正：第一级（跟随li的grand-ul），对于第二级，应在期望的<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>

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

使用jquery sortable，子li不会使用父ul移动

1 个答案: