多层嵌套拖动排序

DOM 结构

<div class="tree">
  <div class="node">
    <span class="node-title">node 1</span>
    <div class="node-children">
      <div class="node">
        <span class="node-title">node 1.1</span>
        <div class="node-children">
          <div class="node">
            <span class="node-title">node 1.1.1</span>
          </div>
          <div class="node">
            <span class="node-title">node 1.1.2</span>
          </div>
          <div class="node">
            <span class="node-title">node 1.1.3</span>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="node">
    <span class="node-title">node 2</span>
    <div class="node-children">
      <div class="node">
        <span class="node-title">node 2.1</span>
      </div>
      <div class="node">
        <span class="node-title">node 2.2</span>
      </div>
      <div class="node">
        <span class="node-title">node 2.3</span>
      </div>
    </div>
  </div>
  <div class="node">
    <span class="node-title">node 3</span>
    <div class="node-children">
      <div class="node">
        <span class="node-title">node 3.1</span>
      </div>
      <div class="node">
        <span class="node-title">node 3.2</span>
      </div>
      <div class="node">
        <span class="node-title">node 3.3</span>
      </div>
    </div>
  </div>
</div>

JavaScript

// 根节点
const tree = document.querySelector(".tree");
const sortable = new Sortable(tree, { animation: 150 });

// 分支节点
const parents = document.querySelectorAll(".node-children");
parents.forEach((parent) => {
  const sortable = new Sortable(parent, { animation: 150 });
});