文章目录

• 一，54-商品服务-API-三级分类-修改-拖拽效果
• • 1，el-tree控件加上允许拖拽的属性
  • 2，是否允许拖拽
  • 3，完整代码

一，54-商品服务-API-三级分类-修改-拖拽效果

本节的主要内容是给三级分类树形结构加上拖拽功能，并且根据分类不能大于三级的规则判断是否能拖拽。

1，el-tree控件加上允许拖拽的属性

el-tree控件加上允许拖拽的属性draggable，此外还需要根据层级判断是否能拖动，通过给allow-drop绑定事件allowDrag实现这个需求。

	allowDrag(draggingNode, dropNode, dropPosition) {       console.log(draggingNode, dropNode, dropPosition);       return true     }, 

在 Element UI（El-UI）的树组件 el-tree 中，allow-drop 事件是一个自定义槽函数，用于控制是否允许将一个节点拖放到另一个节点上。这个函数接受三个参数，分别代表正在拖动的节点、可能的放置目标节点以及放置位置。这三个参数具体如下：

1. draggingNode:
   这个参数是 TreeNode 类型的对象，表示当前正在被拖动的节点。它包含了关于拖动节点的所有信息，如节点的数据、状态等。

2. dropNode:
   同样是 TreeNode 类型的对象，表示潜在的放置目标节点。这是你可能要将 draggingNode 放置到的节点。如果拖动过程中没有特定的放置目标（例如，拖动到树的空白区域），这个参数可能是 undefined 或者不适用。

3. dropPosition:
   表示相对于 dropNode 的放置位置。这是一个字符串，可以是 'before'、'after' 或 'inner'，分别表示拖动的节点将放置在目标节点之前、之后或内部。如果 dropNode 是 undefined，则这个参数可能表示放置在树的顶部或底部。

allow-drop 函数应该返回一个布尔值，指示是否允许进行拖放操作。如果返回 true，则允许拖放；如果返回 false，则阻止拖放操作。例如，在你的代码中：

接下来实现这个函数的逻辑。

原则是当前拖动的阶段到达要放置的位置后，层级数不能超过3，所以核心有3点：

• ①计算出以拖动结点为根结点的子树的深度deep。
• ②结合目标结点的深度及放置位置的类型，判断新位置的层级level。
• ③deep + level <=3 时允许拖动。

关于第②点，新位置的类型可能有三种:

• prev，目标节点的前面
• inner，目标节点的子节点
• next，目标节点的后面

2，是否允许拖拽

①

递归统计draggingNode子树的深度。

	// 递归计算draggingNode子树的深度     countDraggingNodeDeep(draggingNode) {       var deep = 0;       if (draggingNode.childNodes && draggingNode.childNodes.length > 0) {         debugger         draggingNode.childNodes.forEach(child => {           deep = Math.max(deep, this.countDraggingNodeDeep(child));         });       }       return deep + 1;     }, 

②

结合draggingNode子树的深度和位置判断是否能拖动。

	allowDrag(draggingNode, dropNode, dropPosition) {       console.log(draggingNode, dropNode, dropPosition);       var deep = this.countDraggingNodeDeep(draggingNode);        console.log(deep,  dropNode.data.catLevel + deep);        // 根据dropPosition结合dropNode.catLevel来判断draggingNode新位置的位置是否合法       if (dropPosition === "prev" || dropPosition === "next") {         return dropNode.data.catLevel + deep - 1 <= 3;       } else if (dropPosition === "inner" ) {         return dropNode.data.catLevel + deep <= 3;       }     }, 

3，完整代码