拖拽排序是一种常见的用户界面交互模式，通常用于对列表或图像进行自定义排序。实现拖拽排序的基本思路是，用户通过鼠标或手指按住某个列表项或图像，拖动该项到另一个位置，然后将其松开，新的位置就成为该列表项或图像的新位置。

实现拖拽排序的方法有很多种，这里我们主要介绍 Sortable.js 插件的方法：

引用插件（cdn、npm）

<script src="./libs/Sortable/1.15.0/Sortable.min.js"></script>

创建可拖拽排序的列表

<div class="container">
    <div class="row">
        <div class="col" id="json_tree_view">
          	<!-- 此处为生成的 Tree 结构。 -->
        </div>
    </div>
</div>

<template id="template_node">
<div class="list-group-item">
    {{title}} 
    {{child_tag}}
</div>
</template>

以上示例，使用 Bootstrap 5 的内置组件 list-group 和 list-group-item 来创建一个基本的树形结构。

样式美化

.container {
    padding-top: 0.5rem;
}

.list-group {
    border: 0;
}

.list-group-item {
    padding: 0.5rem 1rem;
    border: 0;
    /* 禁止复制文本，以免影响感观。 */
    user-select: none;
    /* 节点背景 */
    background-color: rgba(155, 153, 200, 0.2);
    margin-bottom: 0.2rem;
}

css小技巧：rgba (155, 153, 200, 0.2 )，使用 半透明效果 来达到多层级颜色区分，否则你可能要写多个样式，比如：

.level-1{} /* 第一层 */
.level-2{} /* 第二层 */
.level-3{} /* 第三层 */
.level-4{} /* 第四层 */
//.....

准备数据

const data = [
    { id: 01, title: '家用电器'},
    { id: 02, title: '手机/运营商/数码'},
    { id: 03, title: '电脑/办公'},
    { id: 04, title: '家居/家具/家装/厨具'},
    
    { id: 05, title: '电视'},
    { id: 06, title: '空调'},
    { id: 07, title: '洗衣机'},
    { id: 08, title: '冰箱'},

    { id: 09, title: '手机通讯'},
    { id: 11, title: '运营商'},
    { id: 12, title: '手机配件'},
    { id: 13, title: '摄影摄像'},

    { id: 14, title: '电脑整机'},
    { id: 15, title: '电脑配件'},
    { id: 16, title: '游戏设备'},
    { id: 17, title: '网络产品'},

    { id: 18, title: '厨具'},
    { id: 19, title: '家纺'},
    { id: 20, title: '生活日用'},
    { id: 21, title: '家装软饰'},
];

渲染视图

// 获取节点模板
const template_node = document.getElementById('template_node').innerHTML;
const json_tree_view = document.getElementById('json_tree_view');

// 遍历 树形结构 数据，生成dom标签。
const treeToTag = (datas, leve) => {
    const tag = (datas || []).map(item => {
        return template_node.format({
            id: item.id,
            title: item.title,
            // 递归：获取所有子项数据生成的标签
            child_tag: treeToTag(item.child, (leve || 1) + 1),
            leve: leve || 1
        });
    }).join('');
  	
  	// 返回当前层级所有标签
    //if (!tag) return '';
    return ('<div class="list-group nested-sortable">' + tag + '</div>');
}

// 
json_tree_view.innerHTML = treeToTag(data);

注意：测试时发现，每个节点必须加一个子项的盒子。<div class="list-group nested-sortable">，否则会造成没有子项的时候，其他节点不能放进来。

初始化拖拽排序

// Nested demo
var nestedSortables = [].slice.call(document.querySelectorAll('.nested-sortable'));
for (var i = 0; i < nestedSortables.length; i++) {
    new Sortable(nestedSortables[i], {
        group: 'nested',
        animation: 150,
        fallbackOnBody: true
    });
}

总结

本文包含，使用 CSS半透明 实现多层颜色区分，每个节点都添加一个盒子，保证每个节点都可以添加拖拽元素。

希望本文能够对您有所帮助，感谢您的阅读！

人人为我，我为人人，谢谢您的浏览，我们一起加油吧。