标题:【谷粒商城踩坑记】第五坑 拖拽组件三级菜单拖不了问题

文章目录
    分类:项目产品 标签:谷粒商城

    第五坑 拖拽组件三级菜单拖不了问题

    直接进入或刷新页面后,拖动第三级菜单项,无法修改排序位置,我尝试了直接用源码包中提供的老师的代码也不行,本身就有这个小 Bug ,或者说是其它什么地方有问题。


    原始内容是这样的。

    
    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]);
        }
      
    },

    其实原因就是第三级是没有 childNodes 的,maxLevel就会一直是0,到外面的计算代码中deep就一直计算的会是4。

    allowDrop(draggingNode, dropNode, type) {
      //1、被拖动的当前节点以及所在的父节点总层数不能大于3
    
      //1)、被拖动的当前节点总层数
      console.log("allowDrop:", draggingNode, dropNode, type);
      //
      this.countNodeLevel(draggingNode);
      //当前正在拖动的节点+父节点所在的深度不大于3即可
      let deep = Math.abs(this.maxLevel - draggingNode.level) + 1;
      console.log("深度:", deep);
    
      //   this.maxLevel
      if (type == "inner") {
        // console.log(
        //   `this.maxLevel:${this.maxLevel};draggingNode.data.catLevel:${draggingNode.data.catLevel};dropNode.level:${dropNode.level}`
        // );
        return deep + dropNode.level <= 3;
      } else {
        return deep + dropNode.parent.level <= 3;
      }
    },

    解决方案就是增加一个 else ,把当前节点的值赋给 maxLevel 就好了。

    
    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]);
        }
      }else{
        this.maxLevel = node.level // 这一行
      }
      
    },
    搜索
    关注