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

在Vue项目中使用Element UI实现两个树形组件（Tree）之间的跨树拖拽功能，主要依赖于Element UI提供的Tree组件的拖拽（drag-and-drop）功能。下面是基本的实现步骤和代码示例：

1. 引入Element UI的Tree组件，并确保在Vue项目中已经正确安装并使用了Element UI。

2. 在两个Tree组件中分别设置`draggable`属性为`true`，开启拖拽功能。

3. 设置每个Tree组件的`node-key`属性，为节点数据提供一个唯一的key值，这对于拖拽功能是必须的。

4. 为源Tree组件添加`allow-drag`属性，并为目标Tree组件添加`allow-drop`属性。这两个属性分别用于控制节点是否可以被拖拽和是否可以被放置。

5. 监听源Tree组件的`@node-drag-start`事件，获取被拖拽节点的数据。

6. 监听目标Tree组件的`@node-drop`事件，处理节点放置逻辑。

示例代码如下：

<template>
  <div>
    <el-tree
      :data="data1"
      show-checkbox
      node-key="id"
      draggable
      :allow-drag="false"
      :allow-drop="true"
      @node-drop="handleDrop"
    >
    </el-tree>
    <el-tree
      :data="data2"
      show-checkbox
      node-key="id"
      draggable
      :allow-drag="true"
      :allow-drop="false"
      @node-drag-start="handleDragStart"
    >
    </el-tree>
  </div>
</template>

<script>
export default {
  data() {
    return {
      data1: [
        // Tree1的数据源
      ],
      data2: [
        // Tree2的数据源
      ]
    };
  },
  methods: {
    handleDragStart(node, ev) {
      // 拖拽开始时的逻辑
      console.log('开始拖拽节点：', node);
    },
    handleDrop(params) {
      // 节点放置时的逻辑
      const { dragNode, dropNode, dropPosition } = params;
      console.log('节点放置位置：', dropPosition);
      console.log('放置节点：', dropNode);
      console.log('拖拽节点：', dragNode);
      // 根据dropPosition更新数据源，实现节点的移动
    }
  }
};
</script>

在`handleDrop`方法中，你需要根据`dropPosition`来决定节点移动的位置（例如，`'before'`、`'after'`、`'inner'`），并且更新你的数据源，以反映拖拽操作后的新结构。