企业官网建设流程全解析

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

node-drag-start：开始拖拽节点时触发​​（按下鼠标按钮），无论是否允许放置，此事件都会触发。

allow-drop返回 true 才能触发@node-drag-end="handleDragend"、@node-drop="handleDrop"；
（1）allow-drop：动态控制​​是否允许放置；
（2）node-drag-end：拖拽结束时（可能未成功）触发的事件；
（3）node-drop：拖拽成功完成时触发的事件，触发处理数据更新；
node-drag-end与node-drop无法通过返回值阻止拖拽操作

// ❌ 错误：此时数据尚未更新！handleDragEnd(){this.treeData=newData;// ❌ 不会生效}// ✅ 正确：在 @node-drop 中更新数据handleDrop(){this.treeData=newData;// ✅ 触发响应式更新}

<template><!-- 两棵el-tree的节点跨树拖拽实现 --><divclass="tree-drag"><!-- 左侧树（可拖出） --><el-tree:data="treeData1"ref="tree1"class="tree"node-key="id"draggabledefault-expand-all:props="defaultProps"@node-drop="handleDrop":allow-drop="returnTrue"></el-tree><!-- 右侧树（可拖入） --><el-tree:data="treeData2"ref="tree2"class="tree"node-key="id"draggabledefault-expand-all:allow-drop="returnFalse":props="defaultProps"@node-drag-start="handleDragstart"@node-drag-end="handleDragend"><!-- 使用作用域插槽自定义节点样式 --><spanslot-scope="{ node, data }":class="{ 'custom-red': data.isHighlighted }">{{ node.label }}</span></el-tree></div></template><script>exportdefault{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{// 如果移动到了别的树上，需要恢复该节点，并清掉空节点letdata=JSON.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.isHighlighted=true;// 检查是否有子节点if(data.children&&Array.isArray(data.children)){// 递归处理每个子节点data.children.forEach(child=>{this.createHighlightedNode(child);});}returndata;},// 允许内部拖拽(只放入同级节点，动态控制​​是否允许放置​​)returnTrue(draggingNode,dropNode,type){// 校验所有拖拽节点是否允许放入同级节点if(!draggingNode||!dropNode){returnfalse;}returndraggingNode.level===dropNode.level;},// 拖拽成功完成时触发的事件（allow-drop 返回 true 才能触发处理数据更新）handleDrop(draggingNode,dropNode,dropPosition,event){constlabel=dropNode.label||'';this.$message.info('结束拖拽时最后进入的节点 '+label+'插入位置'+dropPosition);console.log(draggingNode,dropNode,dropPosition,event);constdraggingNodeParentName=draggingNode.label||'';constdropNodeParentName=dropNode.label||'';// 合并父节点的 nameconstmergedName=`${dropNodeParentName}(${draggingNodeParentName})`;// 更新节点的 namedropNode.data.name=mergedName;// 获取被拖拽的节点的子节点数据constchildrenData=draggingNode.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;}}};</script><stylelang="scss"scoped>.tree-drag{display:flex;justify-content:space-between;.tree{flex-grow:1;.custom-red{color:#E4E4E4!important;/* 红色背景 */font-size:14px!important;}}}</style>