下面是完整的可运行示例。拖动一行；或者用 Tab 聚焦到某一行，按 Space，用方向键移动它，再按一次 Space。
Live
正在加载演示…
<script setup lang="ts">
import { DnDProvider } from '@vue-dnd-kit/core';
import TaskList from './TaskList.vue';
</script>
<template>
<!-- The provider goes around the components that drag (often the whole app). -->
<DnDProvider>
<TaskList />
</DnDProvider>
</template>分步说明
用 provider 包裹应用
DnDProvider 掌管拖拽。每个组合式函数都必须在渲染于它内部的组件中运行——而不是在模板里包含它的那个组件中。
创建列表
makeSortableList 接收列表的元素和你的数组。它返回 items：一份在拖拽时实时重新排序的草稿。渲染草稿而不是你的数组，并用 id 作为行的 key。
创建行
每一行用自己的元素和它渲染的项调用 makeSortableItem。行的 key 来自 item.id。
放置完成后，tasks 会得到新的顺序——它是一个普通的 ref，所以应用的其他部分会像看到任何其他变化一样看到这次变化。
在用 Pinia、服务端数据或不可变数据？传入 getter 而不是 ref，然后在
onDrop 中调用 e.preventDefault()，自己应用 e.result。