function makeSortableItem<TData = unknown>( target: MaybeElementRef, options: SortableItemOptions<TData>,): SortableItemReturn;要素を並べ替え可能なリストまたはツリーの行にします：ドラッグでき、場所を空け、自分の位置に着地します。makeSortableList（または makeSortableTree）を呼んだコンポーネントの内側で描画されるコンポーネントで呼び出してください。そこで複数のリストが作られている場合、行は自分を含む要素を持つ最も内側のリストに加わります。行は item（リストの getKey でキーを決めます。デフォルトは item.id）または id で識別します。
const el = useTemplateRef<HTMLElement>('el');
const { isPlaceholder, index } = makeSortableItem(el, { item: () => props.task, handle: '.grip' });
並べ替え可能なリストを参照してください。
デモを読み込み中…
<script setup lang="ts">
import { DnDProvider } from '@vue-dnd-kit/core';
import TodoList from './TodoList.vue';
</script>
<template>
<DnDProvider>
<TodoList />
</DnDProvider>
</template>オプション
id か item を渡してください（両方ある場合は id が優先）。並べ替えのキーはデータから取る必要があります：自動生成の id は、コンポーネントが作り直されるたび（別のリストへの移動、仮想リストによる再利用）に変わり、ドラッグがアイテムを見失ってしまいます。
canDrag 以外のオプションは値、ref、ゲッター（overlay、dropAnimation：値または ref）を受け付け、makeDraggable でのものと同じ意味を持ちます。keyboardMode はありません：キーボードは並べ替え可能なアイテムを位置ごとに動かします。
Key値 · ref · ゲッターリスト内でのアイテムのキー。仮想リストでは、ゲッターにすると常に最新に保たれます。
unknown値 · ref · ゲッターこの要素が描画するアイテム。例：() => props.task。キーは所属するリスト（またはツリー）の getKey から取られ、デフォルトは item.id です。
Component値 · refこのアイテム用のオーバーレイコンポーネント。リストの overlay より優先されます。ドラッグ中に切り替えた ref は、すぐにそれを入れ替えます。
DropAnimation値 · refこのアイテムのドラッグが終わったときのオーバーレイの着地の仕方。リストの dropAnimation より優先されます。ドロップ時に読み取られます。
Modifier[]値 · ref · ゲッターこのアイテムのドラッグに使うモディファイア。プロバイダーのものの後に適用され、リストの modifiers より優先されます。
'x' | 'y'値 · ref · ゲッターこのアイテムのドラッグを 1 つの軸（'x'、'y'）に固定します。リストの axis より優先されます。
MaybeElement | string値 · ref · ゲッターアイテムの中でドラッグを始める要素またはセレクター（属性もこちらに付きます）。
boolean値 · ref · ゲッターtrue：このアイテムはドラッグできません（無効なリストのすべてのアイテムと同じ）。
string | string[]値 · ref · ゲッターこのアイテムの型（1 つまたは複数）。group.put のルールとドロップターゲットの accept に使われます。デフォルト：リストのグループの名前。
TData値 · ref · ゲッタードラッグに運ばせたい任意のデータ：イベントとドロップターゲットは active.data として読み取ります。
string値 · ref · ゲッター人がアイテムを呼ぶ名前：スクリーンリーダー向けのテキストはキーの代わりにこれを読み上げます（Picked up Tomato at position 2 of 5 in Garden）。イベントでは active.label と items に入ります。
ActivationOptions値 · ref · ゲッターリスト（またはツリー）とプロバイダーの activation を上書きします。押下の開始時に読み取られます。
(event: PointerEvent | KeyboardEvent) => boolean追加の関門。たとえば、キーを押している間だけドラッグできるようにします。
boolean値 · ref · ゲッターrole/tabindex/aria-* 属性を設定します（デフォルトは true）。ユーザー自身の設定を上書きすることはありません。ライブに反映：オフにすると、ライブラリが設定したものが取り除かれます。
boolean | NativeDragOptions値 · ref · ゲッターこのアイテムのマウスドラッグはブラウザー自身のドラッグになり、ページの外へ出られます（DraggableOptions.native を参照）。アイテム自体も運びます：アプリの別のウィンドウにある同じグループのリストがそれを受け入れ、受け入れられると、アイテムはこのリストから出ていきます（'move'）。
返り値
makeSortableItem が返すもの。
ComputedRef<boolean>このアイテムがドラッグされている（マルチドラッグのほかのアイテムでも true）か、オーバーレイがまだ着地中です。
ComputedRef<boolean>この要素は、ドラッグ中のアイテムが着地する位置です：アクティブなアイテムの位置。マルチドラッグの 'group' モードでは、一緒に移動するアイテムの位置も含みます。
WritableComputedRef<boolean>プロバイダーの選択に含まれています：選択中のアイテムを 1 つドラッグすると全部を運びます。値を設定すると選択・選択解除できます。
ComputedRef<SortableIndicator | null>インジケーターモード：リストの indicator がこのアイテムに付いている間はその値、それ以外は null。side はラインが入る場所を示し、ツリーでは depth と parentKey がドロップの着地先を示します（side: 'inside'：このアイテムの中へ）。
ComputedRef<number>描画されたドラフトでのインデックス。不明な場合は -1。