Sortable 多层嵌套的拖拽

Sortable 是一个基于 JavaScript 的拖拽库，可以用来实现多层嵌套的拖拽效果。下面是一个示例：

HTML 结构：

<div class="container">
  <div class="item">
    <div class="handle">拖拽</div>
    <div class="content">内容</div>
    <div class="sub-container">
      <div class="item">
        <div class="handle">拖拽</div>
        <div class="content">内容</div>
      </div>
      <div class="item">
        <div class="handle">拖拽</div>
        <div class="content">内容</div>
      </div>
    </div>
  </div>
  <div class="item">
    <div class="handle">拖拽</div>
    <div class="content">内容</div>
    <div class="sub-container">
      <div class="item">
        <div class="handle">拖拽</div>
        <div class="content">内容</div>
      </div>
      <div class="item">
        <div class="handle">拖拽</div>
        <div class="content">内容</div>
      </div>
    </div>
  </div>
</div>

JavaScript 代码：

Sortable.create(document.querySelector('.container'), {
  handle: '.handle',
  animation: 150,
  draggable: '.item',
  onEnd: function (evt) {
    var itemEl = evt.item;
    var parentEl = itemEl.parentNode;
    if (parentEl.classList.contains('sub-container')) {
      parentEl = parentEl.parentNode;
    }
    parentEl.insertBefore(itemEl, parentEl.children[evt.newIndex]);
  }
});

这段代码会将 `.container` 元素中的 `.item` 元素变成可拖拽的，并且会在拖拽结束时更新它们的位置。`handle` 指定拖拽手柄的选择器，`draggable` 指定可拖拽的元素的选择器，`animation` 指定拖拽时的动画时间（单位为毫秒），`onEnd` 是拖拽结束时的回调函数，用于更新元素的位置。在回调函数中，首先获取拖拽的元素和它的父元素，如果父元素是 `.sub-container`，则获取它的父元素。然后使用 `insertBefore` 方法将拖拽的元素插入到正确的位置。