これが動作する完成形です。行をドラッグするか、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>ステップごとに
アプリをプロバイダーで囲む
DnDProvider がドラッグを管理します。すべてのコンポーザブルは、プロバイダーの内側に描画されるコンポーネントで実行する必要があります。プロバイダーをテンプレートに含むコンポーネントではありません。
リストを作る
makeSortableList はリストの要素とあなたの配列を受け取ります。返り値の items は、ドラッグ中にリアルタイムで並べ替わるドラフトです。あなたの配列ではなくドラフトを描画し、行のキーには id を使ってください。
行を作る
各行は、自分の要素と描画するアイテムを渡して makeSortableItem を呼び出します。行のキーは item.id から取られます。
ドロップが完了すると、tasks に新しい順序が入ります。これは普通の ref なので、アプリの他の部分も、ほかの変更と同じようにこの変更を受け取ります。
Pinia、サーバーのデータ、イミュータブルなデータを使っていますか？ref の代わりにゲッターを渡し、
onDrop で e.preventDefault() を呼んで、e.result を自分で適用してください。