第五坑 拖拽組件三級菜單拖不了問題
直接進入或刷新頁面后,拖動第三級菜單項,無法修改排序位置,我嘗試了直接用源碼包中提供的老師的代碼也不行,本身就有這個小 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?// 這一行}},