jquery-sortable不稳定child排序

Question

我正在尝试使用 jquery-sortable，主要用于嵌套和排序项目。在第一层和第一项child，它可以很好地进行嵌套和排序。然而，第二个和后续项目的 childs 可能无法排序。

<div class="card-body">
  <ul class="list-group sortable">
    <li class="list-group-item">
      First
      <ul class="list-group">
        <li class="list-group-item">
          First Child 1
        </li>
        <li class="list-group-item">
          First Child 2
        </li>
        <li class="list-group-item">
          First Child 3
        </li>
      </ul>
    </li>
    <li class="list-group-item">
      Second
      <ul class="list-group">
        <li class="list-group-item">
          Second Child 1
        </li>
        <li class="list-group-item">
          Second Child 2
        </li>
        <li class="list-group-item">
          Second Child 3
        </li>
      </ul>
    </li>
    <li class="list-group-item">
      Third
      <ul class="list-group">
        <li class="list-group-item">
          Third Child 1
        </li>
        <li class="list-group-item">
          Third Child 2
        </li>
        <li class="list-group-item">
          Third Child 3
        </li>
      </ul>
    </li>
  </ul>


$(function() {
  $("ul.sortable").sortable({
    group: 'List'
  });
});

这是 fiddle 来演示这个 https://jsfiddle.net/2p17v6xs/

我不确定我做错了什么。

Answer 1

玩过你的 fiddle 后，我注意到它在没有 bootstrap 的情况下也能正常工作：.list-group-item 有一种风格 position:relative，它似乎是嵌套容器的父级不能包含 position: relative：它可能会扰乱位置计算，库似乎无法计算具有 "position:relative" 的容器的位置。这可能是 lib 本身的问题。要解决它，您可以：

解决lib
向 bootstrap 添加黑客：

Html:

<div class="card-body">
  <ul class="list-group sortable">
    <li class="list-group-item no-position">
      First
      <ul class="list-group">
        <li class="list-group-item">
          First Child 1
        </li>
        <li class="list-group-item">
          First Child 2
        </li>
        <li class="list-group-item">
          First Child 3
        </li>
      </ul>
    </li>
    <li class="list-group-item no-position">
      Second
      <ul class="list-group">
        <li class="list-group-item">
          Second Child 1
        </li>
        <li class="list-group-item">
          Second Child 2
        </li>
        <li class="list-group-item">
          Second Child 3
        </li>
      </ul>
    </li>
    <li class="list-group-item no-position">
      Third
      <ul class="list-group">
        <li class="list-group-item">
          Third Child 1
        </li>
        <li class="list-group-item">
          Third Child 2
        </li>
        <li class="list-group-item">
          Third Child 3
        </li>
      </ul>
    </li>
  </ul>

CSS:

    .no-position:not(.dragged) {
      position: initial;
    }

我想不出别的办法了。

jquery-sortable不稳定child排序

jquery-sortable unstable child sorting

javascript

sorting

jquery

nested

jquery-ui-sortable