Sortable.js 多层嵌套拖动排序

官方文档：sortable.js 中文网

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 })
})