vue3树形控件拖拽

### 使用 Vue3 和 Ant Design Vue 实现树形控件拖拽功能

为了在 Vue3 中实现带有拖拽功能的树形控件，可以采用 `Ant Design Vue` 组件库中的 `<a-tree>` 组件。此组件提供了内置的支持来启用节点之间的拖放操作。

#### HTML 结构定义
通过设置 `draggable` 属性为真值可以让树结构内的项目变得可移动，并且监听 `@drop` 事件处理放置逻辑：

<a-tree 
    v-model:checkedKeys="checkedKeys"
    checkable 
    show-line 
    draggable 
    :tree-data="treeData" 
    @drop="handleDrop">
</a-tree>

上述代码片段展示了如何配置一个基本的、具备拖拽能力的树形菜单[^2]。

#### JavaScript 方法编写
接下来是用于响应拖拽动作的方法示例，这里假设已经初始化好了 `treeData` 数据源以及 `checkedKeys` 来追踪被选中的键列表：

export default {
  setup() {
    const checkedKeys = ref([]);
    
    function handleDrop(info) {
      console.log('dragging node:', info.dragNode);
      console.log('target node:', info.node);

      // 更新 tree data logic here...
      
      // 可能还需要调用接口保存新的顺序到服务器端
    }

    return { 
        checkedKeys,
        handleDrop
     };
  }
}

这段脚本里包含了当发生 drop 操作时触发的回调函数 `handleDrop()` ，它接收的信息对象 (`info`) 包含了有关此次交互的各种细节，比如正在被拖动的那个节点(`dragNode`)和目标位置所在的那个节点(`node`)等信息。

#### 完整案例展示
下面给出的是更完整的例子，其中包括初始数据加载和服务端通信的部分伪代码表示方式：

<template>
  <div id="app">
    <!-- Tree component -->
    <a-tree 
      v-model:checkedKeys="checkedKeys"
      checkable 
      show-line 
      draggable 
      :tree-data="treeData" 
      @drop="handleDrop"/>
  </div>
</template>

<script lang="ts">
import { defineComponent, onMounted } from 'vue';
// 假设这是获取远程数据的服务方法
async function fetchTreeData(): Promise<Array<any>> {/* ... */}

export default defineComponent({
  name: "App",
  
  setup(){
    let treeData = ref([]); // 存储从服务端取得的数据
    let checkedKeys = ref([]);

    async function init() {
       try{
         treeData.value = await fetchTreeData();
       }catch(error){
          console.error("Failed to load initial tree data", error);
       }
    };

    function handleDrop(info) {
      /* 处理拖拽后的业务逻辑 */
    }

    onMounted(() => {
      init(); // 页面挂载完成后立即执行一次初始化请求
    });

    return {
      treeData,
      checkedKeys,
      handleDrop
    };
  },
});
</script>

这个模板不仅实现了基础的功能还考虑到了实际应用中可能遇到的情况，例如异步加载数据等问题。