TAGTREE_tagtree打不开

拖拽排序是一种常见的用户界面交互模式，通常用于对列表或图像进行自定义排序。实现拖拽排序的基本思路是，用户通过鼠标或手指按住某个列表项或图像，拖动

 

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

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

>创建可拖拽排序的列表

{{title}} {{child_tag}}

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

padding-top: 0.5rem; } .list-group { border: 0; } .list-group-item { padding: 0.5rem1rem;

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{} /* 第四层 *///.....

准备数据constdata=[{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 (

); } // json_tree_view.innerHTML = treeToTag(data);注意：测试时发现，每个节点必须加一个子项的盒子