原文链接两棵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且子节点加入目标节点里
