上一篇前端笔记之vue2使用el-tree实现两棵树间节点的拖拽复制node-drag-start开始拖拽节点时触发按下鼠标按钮无论是否允许放置此事件都会触发。allow-drop返回 true 才能触发node-drag-endhandleDragend、node-drophandleDrop1allow-drop动态控制是否允许放置2node-drag-end拖拽结束时可能未成功触发的事件3node-drop拖拽成功完成时触发的事件触发处理数据更新node-drag-end与node-drop无法通过返回值阻止拖拽操作// ❌ 错误此时数据尚未更新handleDragEnd(){this.treeDatanewData;// ❌ 不会生效}// ✅ 正确在 node-drop 中更新数据handleDrop(){this.treeDatanewData;// ✅ 触发响应式更新}template!-- 两棵el-tree的节点跨树拖拽实现 --divclasstree-drag!-- 左侧树可拖出 --el-tree:datatreeData1reftree1classtreenode-keyiddraggabledefault-expand-all:propsdefaultPropsnode-drophandleDrop:allow-dropreturnTrue/el-tree!-- 右侧树可拖入 --el-tree:datatreeData2reftree2classtreenode-keyiddraggabledefault-expand-all:allow-dropreturnFalse:propsdefaultPropsnode-drag-starthandleDragstartnode-drag-endhandleDragend!-- 使用作用域插槽自定义节点样式 --spanslot-scope{ node, data }:class{ custom-red: data.isHighlighted }{{ node.label }}/span/el-tree/div/templatescriptexportdefault{name:TreeDrag,props:[treeData1,treeData2],data(){return{defaultProps:{children:children,label:name},beforeDragNode:null,//被拖拽的节点前一个节点};},methods:{// (1) 手动触发:该节点向父组件通知拖拽开始(只不过目标树是左侧树)// 经过这个移花接木的操作左侧的树会误以为是自身的节点触发了tree-node-drag-start事件它会将被拖拽节点保存在组件内handleDragstart(node,event){this.$refs.tree1.$emit(tree-node-drag-start,event,{node:node});},// (2) 鼠标滑过阶段// 当鼠标拖拽着右侧树上的节点从左侧树上的节点划过也就是触发dragover事件时左侧树会误以为是在拖拽自己的节点因此会在tree-node-drag-over事件中自动执行位置计算所以这一阶段无需我们干预。// (3)鼠标释放阶段// 尽管此时左侧树已经误以为被拖拽的是自身节点但被拖拽的节点此时仍然是右侧树的子组件所以当鼠标释放时它只能向右侧树即它的父组件触发tree-node-drag-end事件。由于右侧树不允许释放所以此时节点并没有发生移动。// 为了让左侧树收到鼠标释放的通知我们开始进行第二次移花接木即把右侧树上发生的tree-node-drag-end事件以同样的方式触发给左侧树handleDragend(draggingNode,endNode,position,event){//不只是做节点移动而是拖拽复制也就是要保留右侧树上的原节点//真正要保留原节点很难实现所以选择在移动后恢复右侧树上的节点// 插入一个空节点用于占位letemptyData{id:(newDate),children:[]};this.$refs.tree2.insertBefore(emptyData,draggingNode);this.$refs.tree1.$emit(tree-node-drag-end,event);this.$nextTick((){// 如果是移动到了当前树上需要清掉空节点if(this.$refs.tree2.getNode(draggingNode.data)){this.$refs.tree2.remove(emptyData);}else{// 如果移动到了别的树上需要恢复该节点并清掉空节点letdataJSON.parse(JSON.stringify(draggingNode.data));this.createHighlightedNode(data);// 添加标记字段this.$refs.tree2.insertAfter(data,this.$refs.tree2.getNode(emptyData));this.$refs.tree2.remove(emptyData);}})},// 递归创建带高亮标记的节点createHighlightedNode(data){// 给当前节点添加 isHighlighted 属性data.isHighlightedtrue;// 检查是否有子节点if(data.childrenArray.isArray(data.children)){// 递归处理每个子节点data.children.forEach(child{this.createHighlightedNode(child);});}returndata;},// 允许内部拖拽(只放入同级节点动态控制是否允许放置)returnTrue(draggingNode,dropNode,type){// 校验所有拖拽节点是否允许放入同级节点if(!draggingNode||!dropNode){returnfalse;}returndraggingNode.leveldropNode.level;},// 拖拽成功完成时触发的事件allow-drop 返回 true 才能触发处理数据更新handleDrop(draggingNode,dropNode,dropPosition,event){constlabeldropNode.label||;this.$message.info(结束拖拽时最后进入的节点 label插入位置dropPosition);console.log(draggingNode,dropNode,dropPosition,event);constdraggingNodeParentNamedraggingNode.label||;constdropNodeParentNamedropNode.label||;// 合并父节点的 nameconstmergedName${dropNodeParentName}(${draggingNodeParentName});// 更新节点的 namedropNode.data.namemergedName;// 获取被拖拽的节点的子节点数据constchildrenDatadraggingNode.data.children||[];// 检查 dropNode 是否有 children 属性如果没有则添加一个空数组if(!dropNode.data.children){dropNode.data.push({children:[]});}// 更新节点的 children 属性dropNode.data.children.push(...childrenData);// 删除被拖拽的节点this.$refs.tree1.remove(draggingNode.data);},// 禁止内部拖拽returnFalse(){returnfalse;}}};/scriptstylelangscssscoped.tree-drag{display:flex;justify-content:space-between;.tree{flex-grow:1;.custom-red{color:#E4E4E4!important;/* 红色背景 */font-size:14px!important;}}}/style
上一篇前端笔记之vue2使用el-tree实现两棵树间节点的拖拽复制node-drag-start开始拖拽节点时触发按下鼠标按钮无论是否允许放置此事件都会触发。allow-drop返回 true 才能触发node-drag-endhandleDragend、node-drophandleDrop1allow-drop动态控制是否允许放置2node-drag-end拖拽结束时可能未成功触发的事件3node-drop拖拽成功完成时触发的事件触发处理数据更新node-drag-end与node-drop无法通过返回值阻止拖拽操作// ❌ 错误此时数据尚未更新handleDragEnd(){this.treeDatanewData;// ❌ 不会生效}// ✅ 正确在 node-drop 中更新数据handleDrop(){this.treeDatanewData;// ✅ 触发响应式更新}template!-- 两棵el-tree的节点跨树拖拽实现 --divclasstree-drag!-- 左侧树可拖出 --el-tree:datatreeData1reftree1classtreenode-keyiddraggabledefault-expand-all:propsdefaultPropsnode-drophandleDrop:allow-dropreturnTrue/el-tree!-- 右侧树可拖入 --el-tree:datatreeData2reftree2classtreenode-keyiddraggabledefault-expand-all:allow-dropreturnFalse:propsdefaultPropsnode-drag-starthandleDragstartnode-drag-endhandleDragend!-- 使用作用域插槽自定义节点样式 --spanslot-scope{ node, data }:class{ custom-red: data.isHighlighted }{{ node.label }}/span/el-tree/div/templatescriptexportdefault{name:TreeDrag,props:[treeData1,treeData2],data(){return{defaultProps:{children:children,label:name},beforeDragNode:null,//被拖拽的节点前一个节点};},methods:{// (1) 手动触发:该节点向父组件通知拖拽开始(只不过目标树是左侧树)// 经过这个移花接木的操作左侧的树会误以为是自身的节点触发了tree-node-drag-start事件它会将被拖拽节点保存在组件内handleDragstart(node,event){this.$refs.tree1.$emit(tree-node-drag-start,event,{node:node});},// (2) 鼠标滑过阶段// 当鼠标拖拽着右侧树上的节点从左侧树上的节点划过也就是触发dragover事件时左侧树会误以为是在拖拽自己的节点因此会在tree-node-drag-over事件中自动执行位置计算所以这一阶段无需我们干预。// (3)鼠标释放阶段// 尽管此时左侧树已经误以为被拖拽的是自身节点但被拖拽的节点此时仍然是右侧树的子组件所以当鼠标释放时它只能向右侧树即它的父组件触发tree-node-drag-end事件。由于右侧树不允许释放所以此时节点并没有发生移动。// 为了让左侧树收到鼠标释放的通知我们开始进行第二次移花接木即把右侧树上发生的tree-node-drag-end事件以同样的方式触发给左侧树handleDragend(draggingNode,endNode,position,event){//不只是做节点移动而是拖拽复制也就是要保留右侧树上的原节点//真正要保留原节点很难实现所以选择在移动后恢复右侧树上的节点// 插入一个空节点用于占位letemptyData{id:(newDate),children:[]};this.$refs.tree2.insertBefore(emptyData,draggingNode);this.$refs.tree1.$emit(tree-node-drag-end,event);this.$nextTick((){// 如果是移动到了当前树上需要清掉空节点if(this.$refs.tree2.getNode(draggingNode.data)){this.$refs.tree2.remove(emptyData);}else{// 如果移动到了别的树上需要恢复该节点并清掉空节点letdataJSON.parse(JSON.stringify(draggingNode.data));this.createHighlightedNode(data);// 添加标记字段this.$refs.tree2.insertAfter(data,this.$refs.tree2.getNode(emptyData));this.$refs.tree2.remove(emptyData);}})},// 递归创建带高亮标记的节点createHighlightedNode(data){// 给当前节点添加 isHighlighted 属性data.isHighlightedtrue;// 检查是否有子节点if(data.childrenArray.isArray(data.children)){// 递归处理每个子节点data.children.forEach(child{this.createHighlightedNode(child);});}returndata;},// 允许内部拖拽(只放入同级节点动态控制是否允许放置)returnTrue(draggingNode,dropNode,type){// 校验所有拖拽节点是否允许放入同级节点if(!draggingNode||!dropNode){returnfalse;}returndraggingNode.leveldropNode.level;},// 拖拽成功完成时触发的事件allow-drop 返回 true 才能触发处理数据更新handleDrop(draggingNode,dropNode,dropPosition,event){constlabeldropNode.label||;this.$message.info(结束拖拽时最后进入的节点 label插入位置dropPosition);console.log(draggingNode,dropNode,dropPosition,event);constdraggingNodeParentNamedraggingNode.label||;constdropNodeParentNamedropNode.label||;// 合并父节点的 nameconstmergedName${dropNodeParentName}(${draggingNodeParentName});// 更新节点的 namedropNode.data.namemergedName;// 获取被拖拽的节点的子节点数据constchildrenDatadraggingNode.data.children||[];// 检查 dropNode 是否有 children 属性如果没有则添加一个空数组if(!dropNode.data.children){dropNode.data.push({children:[]});}// 更新节点的 children 属性dropNode.data.children.push(...childrenData);// 删除被拖拽的节点this.$refs.tree1.remove(draggingNode.data);},// 禁止内部拖拽returnFalse(){returnfalse;}}};/scriptstylelangscssscoped.tree-drag{display:flex;justify-content:space-between;.tree{flex-grow:1;.custom-red{color:#E4E4E4!important;/* 红色背景 */font-size:14px!important;}}}/style
