谷粒商城p54 - 三级分类的修改拖拽效果

拖动菜单时需要修改顺序和级别

需要考虑两种类型节点的catLevel

一种关系是：如果是同一个节点下的子节点的前后移动，则不需要修改其catLevel

如果是拖动到另外一个节点内或父节点中，则要考虑修改其catLevel

如果拖动到与父节点平级的节点关系中，则要将该拖动的节点的catLevel，设置为兄弟节点的Level，

先考虑parentCid还是先考虑catLevel?

两种关系在耦合

另外还有一种是前后拖动的情况

哪个范围最大？

肯定是拖动类型关系最大，

如果是前后拖动，则拖动后需要看待拖动节点的层级和设置待拖动节点的parentId，

​ 如果待拖动节点和目标节点的层级相同，则认为是同级拖动，只需要修改节点的先后顺序即可；

​ 否则认为是跨级拖动，则需要修改层级和重新设置parentID

​ 如果

​ 以拖动类型来分，并不合适，比较合适的是跨级拖动和同级拖动

如何判断是跨级拖动还是同级拖动，根据拖动的层级来看，如果是同一级的拖动，只需要修改先后顺序即可，但是这样也会存在一个问题，就是当拖动到另外一个分组下的同级目录中，显然也需要修改parentID，究竟什么样的模型最好呢？

另外也可以判断在跨级移动时，跨级后的parentID是否相同，如果不相同，则认为是在不同目录下的跨级移动需要修改parentID。

顺序、catLevel和parentID

同级移动：

（1）首先判断待移动节点和目标节点的catLevel是否相同，

（2）相同则认为是同级移动，

​ 如果此时移动后目标节点的parentID和待移动节点的相同，但是移动类型是前后移动，只需要调整顺序即可，此时移动类型是inner，则需要修改catLevel和parentId和顺序

​ 如果此时移动后目标节点的parentID和待移动节点的不相同，但是移动类型是前后移动，则需要调整顺序和parentId，此时移动类型是inner，则需要修改catLevel和parentId和顺序

通过这两步的操作能看到一些共性，如果抽取移动类型作为大的分类，则在这种分类下，

如果是前后移动，则分为下面几种情况：

​ 同级别下的前后移动：界定标准为catLevel相同，但是又可以分为parentID相同和parentID不同，parent相同时，只需要修改顺序即可；parentID不同时，需要修改parentID和顺序

​ 不同级别下的前后移动：界定标准为catLevel不同，此时无论如何都要修改parentID，顺序和catLevel

如果是inner类型移动，则分为一下的几种情况。

​ 此时不论是同级inner，还是跨级innner，都需要修改parentID，顺序和catLevel

1.首先设置el-tree的属性

draggable // 实现可拖拽

allow-drop="allowDrop" // 拖拽函数

<el-tree
      node-key="catId"
      show-checkbox
      :data="menus"
      :props="defaultProps"
      :expand-on-click-node="false"
      :default-expanded-keys="expandKey"
      draggable
      allow-drop="allowDrop"
    >

 2.实现allowDroop函数

draggingNode:被拖拽的节点

dropNode：拖拽到的节点

type：拖拽类型

实现思路：三级分类，拖拽的节点不能超过三级，从而做出限制

1. 1.递归去查找被拖拽的节点中的子节点中的等级，定义变量去接收，这里的maxLevel 说白了就是去记录递归查找中最大的level等级数，maxLevel去和递归中children节点所有的Level去比较，如果比当前maxLevel还要大，那么就重新将当前值重新赋值给maxLevel，递归结束，maxLevel必定是最大值。也就是被拖拽的节点最后children节点的Level。其实就是和三个数求最大值很类似（都是大于0的数），定义一个变量maxValue = 0 假设他就是最大，与其他三个数依次比较，当其中有比他大的值，则重新赋值记录下来，那么遍历结束maxValue记录的就是最大值
2. 一共要拖动节点的深度就是：deep = (maxLevel - 当前节点的level)+1
3. 最后判断被拖动deep深度+拖拽到的节点不大于3级，有两种情况，一种是拖动inner里面，一种是上面下面
    if (type == "inner") {
           return deep + dropNode.level <= 3;
         } else {
           return deep + dropNode.parent.level <= 3;
         }

    allowDrop(draggingNode, dropNode, type) {
      //1、被拖动的当前节点以及所在的父节点总层数不能大于3

      //1）、被拖动的当前节点总层数
      console.log("allowDrop:", draggingNode, dropNode, type);
      // draggingNode：
      // 这里递归其实算的就是拖动节点的最大深度，减去当前深度并且加1，等于的就是要拖动多少个深度的节点
      this.countNodeLevel(draggingNode);
      //当前正在拖动的节点+父节点所在的深度不大于3即可
      let deep = Math.abs(this.maxLevel - draggingNode.level) + 1;
      console.log("深度：", deep);

      //   this.maxLevel
      if (type == "inner") {
        return deep + dropNode.level <= 3;
      } else {
        return deep + dropNode.parent.level <= 3;
      }
    },
    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]);
        }
      }
    },