前端笔记之vue2使用el-tree实现两棵树间节点的拖拽复制-北京尧图网络

原文链接两棵el-tree的节点跨树拖拽实现参照这篇文章把它做成组件新增左侧树可拖出被拖节点变灰提示拖拽中拖拽后TreeDragComponent.vuetemplate!-- 两棵el-tree的节点跨树拖拽实现 --divclasstree-drag!-- 左侧树可拖出 --el-tree:datatreeData1reftree1classtreenode-keyiddraggabledefault-expand-all:allow-dropreturnFalse:propsdefaultPropsnode-drag-starthandleDragstartnode-drag-endhandleDragend!-- 使用作用域插槽自定义节点样式 --spanslot-scope{ node, data }:class{ custom-red: data.isHighlighted }{{ node.label }}/span/el-tree!-- 右侧树可拖入 --el-tree:datatreeData2reftree2classtreenode-keyiddraggabledefault-expand-all:propsdefaultProps:allow-dropreturnTrue/el-tree/div/templatescriptexportdefault{name:TreeDrag,props:[treeData1,treeData2],data(){return{defaultProps:{children:children,label:name},};},methods:{// (1) 手动触发:该节点向父组件通知拖拽开始(只不过目标树是右侧树)// 经过这个移花接木的操作右侧的树会误以为是自身的节点触发了tree-node-drag-start事件它会将被拖拽节点保存在组件内handleDragstart(node,event){this.$refs.tree2.$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.tree1.insertBefore(emptyData,draggingNode);this.$refs.tree2.$emit(tree-node-drag-end,event);this.$nextTick((){// 如果是移动到了当前树上需要清掉空节点if(this.$refs.tree1.getNode(draggingNode.data)){this.$refs.tree1.remove(emptyData);}else{// 如果移动到了别的树上需要恢复该节点并清掉空节点letdataJSON.parse(JSON.stringify(draggingNode.data));this.createHighlightedNode(data);// 添加标记字段this.$refs.tree1.insertAfter(data,this.$refs.tree1.getNode(emptyData));this.$refs.tree1.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// 校验所有拖拽节点是否允许放入如只能放入同级或特定父级// return this.draggingNodes.every(node // node.level 2 // 限制最大层级// node.type ! system // 限制类型// )returntrue;},// 禁止内部拖拽returnFalse(){returnfalse;}}};/scriptstylelangscssscoped.tree-drag{display:flex;justify-content:space-between;.tree{flex-grow:1;.custom-red{color:#E4E4E4!important;/* 红色背景 */font-size:14px!important;}}}/styleParent.vueTreeDrag:treeData1treeDataLeft:treeData2treeDataRight/TreeDragelement-ui源码中用于定义树节点的element-ui\packages\tree\src\tree-node.vue组件下一篇在此基础上加功能el-tree拖拽事件限制同级拖拽获取拖拽后节点的前后节点同级拖拽合并父节点name且子节点加入目标节点里

前端笔记之vue2使用el-tree实现两棵树间节点的拖拽复制

相关推荐

Android WebView H5文件上传完整解决方案：从原理到实战

网页截图又糊又空白？snapdom 元素级捕获完整指南

VisionProTeleop 视频流回传教程：如何把机器人相机画面实时传回 Vision Pro？

更多资讯

PoB离线Build规划：天赋树与伤害计算一次算清

微信API发送失败别盲目重试：个人微信二次开发判断法

CKEditor 4 聚焦状态下销毁内联编辑器的空引用崩溃：`isInline of null` 问题与 Bender 手动测试解析

如何在电脑上运行《索尼克：释放》：Unleashed Recompiled 静态重编译版完整上手指南

叉积判向：从三角形朝向到背面剔除的工程实战

Wing 语言 inflight Handler 单例语义剖析：以 `inflight_handler_singleton.test.w` 快照测试为例

今日更新

防关联浏览器哪个好？三款产品实测差异解析

2026钢铁行业AI转型系统选型对比：多基地排产、大宗原燃料采购与质量追溯，六家厂商能力差异在哪里

影刀RPA深度实战：大模型Fine-tuning定制RPA专用Prompt与指令生成

本周精选

交通拥堵预测毕设：基于Python+LSTM的车辆流量预测系统全流程解析

MATLAB/Simulink搭建10机39节点电力系统暂态稳定仿真实战

无人机航拍三维重建全流程：从SfM到网格生成的避坑指南

本月热门

我发现了一个新思路：用 Remotion + Claude Code 像写代码一样自动化生成短视频

Windows下 Codex 中 Chrome 和 Computer Use 插件不可用问题排查及解决参考方式：TaoToken 统一 Key 配置与验证

2026 大模型集体涨价：用 Python 做企业 Token 成本测算与选型避坑（附配置）

读完文章，想聊聊您的网站？