el-tree-v2 拖拽

`Element-UI` 的 `el-tree-v2` 是一个基于 Vue.js 开发的树形组件，它提供了丰富的功能，包括拖拽节点（draggable nodes）的支持，使得用户能够灵活地调整树结构。在 `el-tree-v2` 中，拖拽功能通常通过组件的内置 API 和事件处理来实现。

以下是 `el-tree-v2` 拖拽节点的基本步骤和关键点：

1. **启用拖拽**: 首先，在组件选项中设置 `draggable` 为 `true`，并可能需要配置 `allow-drag` 和 `drop-ok-props` 来指定哪些节点允许拖拽和接受目标。

<el-tree
  :data="treeData"
  :props="defaultProps"
  :draggable="true"
  :allow-drag="{ disabled: node.disabled }"
  :drop-ok-props="{ children: true }"
/>

2. **定义拖拽事件**: 使用组件提供的 `@drop`、`@drag-over` 和 `@drag-start` 事件来处理拖拽过程中的交互。例如，`@drop` 会在节点放下时触发，`@drag-over` 则处理拖动节点在目标上移动时的状态。

<el-tree
  @drop="handleDrop"
  @drag-over="handleDragOver"
  @drag-start="handleDragStart"
/>

3. **处理拖拽操作**: 在这些事件处理器中，你可以读取拖动节点 (`event.dragNode`) 和目标节点 (`event.target`)，进行判断和操作。比如检查目标节点是否可以接受拖入，然后更新数据模型（通常是通过 `this.$set` 或者 `this.$refs.tree.$emit('node-drop', ...)`）。

methods: {
  handleDrop(event) {
    const { draggedNode, targetNode } = event;
    // 更新节点位置或合并/拆分节点
    this.updateTreeNode(draggedNode, targetNode);
  },
  handleDragOver(event) {
    event.preventDefault(); // 阻止默认行为，防止自动滚动
    // 根据目标节点的属性决定是否允许放置
  },
  handleDragStart() {
    // 初始化拖拽状态
  }
}