基于vue+element 实现两个树形tree之间的跨树拖拽

<el-tree
  :data="data"
  node-key="id"
  default-expand-all
  @node-drag-start="handleDragStart"
  @node-drag-enter="handleDragEnter"
  @node-drag-leave="handleDragLeave"
  @node-drag-over="handleDragOver"
  @node-drag-end="handleDragEnd"
  @node-drop="handleDrop"
  draggable
  :allow-drop="allowDrop"
  :allow-drag="allowDrag">
</el-tree>

这是element中可以用于自身拖拽的组件，今天要完成的是跨树拖拽，大概思路就是节点的复制
下面先附上代码

<template>
  <div class="tree-drag">
    <el-tree :data="treeData1" ref="treeIn" class="tree" node-key="id" default-expand-all draggable :allow-drag="returnTrue" @node-drag-start="handleDragstart" @node-drag-end="handleDragend"></el-tree>
    <el-tree :data="treeData2" ref="treeOut" class="tree" node-key="id" default-expand-all draggable :allow-drop="returnTrue" @node-drop="handleDrop"></el-tree>
  </div>
</template> 
<script>
export default {
  data() {
    return {
      treeData1: [{
        id: 1,
        label: "1-1111",
        children: [{
          id: 4,
          label: "2-1111",
          children: [{ id: 9, label: "3-1111" }]
        }],
      }],
      treeData2: [{
        id: 2,
        label: "1-2222",
        children: [{
          id: 5,
          label: "2-2222",
          children: [{ id: 8, label: "3-2222" }],
        }],
      }],
    };
  },
  methods: {
    //左侧节点触发拖拽
    handleDragstart(node, event) {
      console.log('start', node, event)
      //在左侧节点触发拖拽的时候触发右侧节点的拖拽事件
      this.$refs.treeOut.$emit('tree-node-drag-start', event, { node: node });
    },
    //拖拽结束，但是确定是否成功
    handleDragend(draggingNode, endNode, position, event) {
      console.log('end', draggingNode, endNode, position, event)
      // 新的空节点
      let newData = { id: (+new Date), children: [] };
      //在左tree插入拖拽的节点
      this.$refs.treeIn.insertBefore(newData, draggingNode);
      //右tree触发结束拖拽事件
      this.$refs.treeOut.$emit('tree-node-drag-end', event);
      this.$nextTick(() => {
        // 如果是移动到了自身---
        console.log(this.$refs.treeIn.getNode(draggingNode.data))
        if (this.$refs.treeIn.getNode(draggingNode.data)) {
          this.$refs.treeIn.remove(newData);
          console.log('移动到自身')
        } else {
          // 如果移动到了右tree上----
          let data = JSON.parse(JSON.stringify(draggingNode.data));
          this.$refs.treeIn.insertAfter(data, this.$refs.treeIn.getNode(newData));
          this.$refs.treeIn.remove(newData);
          console.log('移动到别的tree')
        }
      })
    },
    //结束拖拽，可得到拖拽来源与去向
    //  handleDrop(draggingNode, dropNode, dropType, ev) {
    //     console.log('移动结束',draggingNode, dropNode, dropType,ev);
    //   },
    returnTrue() {
      return true;
    },
    returnFalse() {
      return false;
    }
  }
};
</script>
 
<style scoped>
.tree {
  display: inline-block;
  overflow: hidden;
  width: 200px;
  height: 300px;
  border: 1px solid #444;
}
</style>

复制即可运行，目前完成的是节点的复制，如需剪切自行发挥