第五坑 拖拽組件三級菜單拖不了問題直接進入或刷新頁面后,拖動第三級菜單項,無法修改排序位置，我嘗試了直接用源碼包中提供的老師的代碼也不行，本身就有這個小 Bug ，或者說是其它什么地方有問題。 原始內(nèi)容是這樣的。
countNodeLevel(node){
// 找到所有子節(jié)點，求出最大深度
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、被拖動的當(dāng)前節(jié)點以及所在的父節(jié)點總層數(shù)不能大于3
//1）、被拖動的當(dāng)前節(jié)點總層數(shù)
console.log("allowDrop:", draggingNode, dropNode, type);
//
this.countNodeLevel(draggingNode);
//當(dāng)前正在拖動的節(jié)點+父節(jié)點所在的深度不大于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 ，把當(dāng)前節(jié)點的值賦給 maxLevel 就好了。
countNodeLevel(node){
// 找到所有子節(jié)點，求出最大深度
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 // 這一行
}
},
|
