gulimall项目笔记：P54三级分类拖拽功能实现

超勇的阿杰2025-08-16 17:38

gulimall项目笔记：P54三级分类拖拽功能实现

技术方案

采用ElementUI的Tree树形控件实现分类拖拽功能

功能规则

层级限制：分类结构最多支持3级
拖拽验证：通过ElementUI的allow-drop事件实现

核心参数

allow-drop事件包含三个关键参数：

draggingNode - 拖拽中的节点
dropNode - 目标放置节点
type - 拖拽类型（'prev'、'inner'、'next'）

参数draggingNode和dropNode包含两个重要属性：

childNodes - 子节点集合
level - 节点层级

实现逻辑

1.计算子树深度(countNodeLevel方法)

首先通过计算当前拖拽节点draggingNode的最大子树的level。

js 复制代码

countNodeLevel(node) {
	if(node.childNodes != null && node.childNodes.length > 0){
		for(let i = 0; i< node.childNodes.length; i ++){
			if(node.childNodes[i].level > this.maxLevel){
				this.maxLevel = node.childNodes[i].level;
			}
			this.countNodeLevel(node.childNodes[i]);
		}	
	}
}

然后在计算出draggingNode的最大深度deep。
deep = this.maxLevel -- draggingNode.level + 1

基于这些参数，三级目录结构可归纳为三种情况：

2.允许拖拽判断（allowDrop方法）：

然后根据拖拽放置类型type（inner表示插入目标节点内，prev或next表示放置在目标节点前后）来判断是否允许拖拽。如果是inner类型，判断deep + dropNode.level <= 3；如果是before或after类型，判断deep + dropNode.parent.level <= 3。

js 复制代码

if (type == 'inner') {
	return deep + dropNode.level <= 3;
}else{
	return deep + dropNode.parent.level <= 3;
}

扩展

如果层级限制的分类结构最多支持n级，我们只需要把<= 3改成<= n即可。