第五坑 拖拽組件三級(jí)菜單拖不了問(wèn)題

直接進(jìn)入或刷新頁(yè)面后,拖動(dòng)第三級(jí)菜單項(xiàng),無(wú)法修改排序位置，我嘗試了直接用源碼包中提供的老師的代碼也不行，本身就有這個(gè)小 Bug ，或者說(shuō)是其它什么地方有問(wèn)題。

原始內(nèi)容是這樣的。

countNodeLevel(node){
// 找到所有子節(jié)點(diǎn)，求出最大深度
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]);
    }

},

其實(shí)原因就是第三級(jí)是沒(méi)有 childNodes 的，maxLevel就會(huì)一直是0，到外面的計(jì)算代碼中deep就一直計(jì)算的會(huì)是4。

allowDrop(draggingNode, dropNode, type) {
  //1、被拖動(dòng)的當(dāng)前節(jié)點(diǎn)以及所在的父節(jié)點(diǎn)總層數(shù)不能大于3

//1）、被拖動(dòng)的當(dāng)前節(jié)點(diǎn)總層數(shù)
console.log("allowDrop:", draggingNode, dropNode, type);
//
this.countNodeLevel(draggingNode);
//當(dāng)前正在拖動(dòng)的節(jié)點(diǎn)+父節(jié)點(diǎn)所在的深度不大于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;
  }
},

解決方案就是增加一個(gè) else ，把當(dāng)前節(jié)點(diǎn)的值賦給 maxLevel 就好了。

countNodeLevel(node){
// 找到所有子節(jié)點(diǎn)，求出最大深度
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 // 這一行
  }

},