vue3 el-tree 拖拽的实现

在 Vue3 中，`el-tree` 是 Element UI 提供的一款树状组件，它支持拖拽功能。要实现 `el-tree` 的拖拽功能，你可以按照以下步骤操作：

1. 首先，在你的项目中安装 Element UI 和相关的依赖，例如 `@element-plus/draggable`，可以使用 npm 或 yarn 进行安装：

   npm install element-ui @element-plus/draggable
   # 或者
   yarn add element-ui @element-plus/draggable

2. 然后在 `Vue` 组件中引入并注册 draggable 插件：

import { Draggable } from '@element-plus/draggable';
import { ElTree } from 'element-ui';

Vue.use(Draggable);
Vue.component('el-tree', ElTree);

3. 定义你的数据结构，包含拖拽所需的属性，比如 `draggable`、`key` 和 `parent-key`：

{
  "data": [
    {
      "label": "节点A",
      "key": "node-a",
      "draggable": true,
      "children": [
        // 子节点...
      ]
    },
    // 其他节点...
  ],
  "options": {
    /* 树选项配置 */
  }
}

4. 在 `el-tree` 上启用拖拽功能，并设置合适的回调函数处理拖动事件：

<template>
  <el-tree
    :data="treeData"
    :props="defaultProps"
    :expand-on-click-node="false"
    :drag-enabled="true"
    :drop-shadow="false"
    @drag-over="onDragOver"
    @drop="onDrop"
    @drag-start="onDragStart"
    @drag-end="onDragEnd"
  ></el-tree>
</template>

<script setup>
import { reactive, computed } from 'vue';

const treeData = ...; // 初始化的数据
const defaultProps = {
  children: '__children__',
  label: 'name',
  parentKey: 'pid'
};

// 拖放事件处理器
function onDragOver(e) {
  if (e.dropTarget && e.dropPosition === 'before') {
    e.preventDefault();
  }
}

function onDrop(e) {
  const sourceNode = e.source;
  const targetNode = e.target;

  if (sourceNode === targetNode) return;

  // 更新源节点和目标节点的位置
  moveNode(sourceNode, targetNode);
}

function onDragStart(e) {
  e.dataTransfer.setData('text/plain', e.item.key);
}

function onDragEnd() {
  // 清除数据
  e.dataTransfer.clearData();
}

function moveNode(sourceNode, targetNode) {
  // 通过源节点和目标节点的操作，调整它们在数组中的位置
  // 这里只是一个简单的示例，实际应用中需要根据业务逻辑调整
  const sourceIndex = sourceNode.parent.children.findIndex(node => node.key === sourceNode.key);
  const targetIndex = targetNode.parent.children.findIndex(node => node.key === targetNode.key);

  // 移除 sourceNode 从其当前的 parent.children
  [...sourceNode.parent.children].splice(sourceIndex, 1);

  // 将 sourceNode 插入到 targetNode 后面
  if (targetIndex > -1) {
    sourceNode.parent.children.splice(targetIndex + 1, 0, sourceNode);
  } else {
    sourceNode.parent.children.push(sourceNode);
  }
}
</script>