function makeSortableList<T>( target: MaybeElementRef, options: SortableListOptions<T>,): SortableListReturn<T>;コンテナーを並べ替え可能なリストにします。自分の配列ではなく、返される items（ドラフトの順序）を描画してください：ドロップは onDrop の後で options.items に書き戻されます。ただし event.preventDefault() で event.result を自分で扱う場合を除きます。
const list = useTemplateRef<HTMLElement>('list');
const { items } = makeSortableList(list, { items: tasks, group: 'board' });
リストの行は makeSortableItem を呼び出します。並べ替え可能なリストとアイテムを共有するリストを参照してください。
デモを読み込み中…
<script setup lang="ts">
import { ref } from 'vue';
import { DnDProvider } from '@vue-dnd-kit/core';
import Segmented from './Segmented.vue';
import Tiles from './Tiles.vue';
const strategy = ref<'vertical' | 'horizontal' | 'grid'>('grid');
const placeholder = ref<'item' | 'indicator'>('item');
const behavior = ref<'sort' | 'swap'>('sort');
</script>
<template>
<DnDProvider>
<div class="demo">
<div class="switches">
<Segmented v-model="strategy" name="strategy" :options="['vertical', 'horizontal', 'grid']" />
<Segmented v-model="placeholder" name="placeholder" :options="['item', 'indicator']" />
<Segmented v-model="behavior" name="behavior" :options="['sort', 'swap']" />
</div>
<code class="call">makeSortableList(el, { strategy: '{{ strategy }}', placeholder: '{{ placeholder }}', behavior: '{{ behavior }}' })</code>
<Tiles :strategy="strategy" :placeholder="placeholder" :behavior="behavior" />
</div>
</DnDProvider>
</template>
<style scoped>
.demo {
display: flex;
flex-direction: column;
align-items: center;
gap: 18px;
max-width: 100%;
}
.switches {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 16px;
}
.call {
max-width: 100%;
padding: 6px 10px;
overflow-x: auto;
border-radius: 8px;
background: color-mix(in srgb, currentColor 6%, transparent);
font: 11px/1.4 ui-monospace, Menlo, Consolas, monospace;
white-space: nowrap;
color: #42b883;
}
</style>オプション
makeSortableList のオプション。1 つのコンポーネントで複数のリスト（やツリー）を作れます：その中で描画される各アイテムは、自分を含む要素を持つ最も内側のリストに加わります。
オプションは値、ref、ゲッター（overlay、overOverlay、dropAnimation、overDropAnimation、animation：値または ref）を受け付け、リストが必要とするときに読み取られるため、変更は遅くとも次のドラッグから反映されます。例外：id と group はリストの作成時に一度だけ読み取られます。items はモデルそのものです。関数（getKey、filter、clone、createItem、コールバック）はそのまま渡されます。
SortableItems<T>信頼できる唯一の情報源。書き込み可能な ref は、ドロップ時、onDrop の直後に新しい配列を受け取ります。読み取り専用のソース（ゲッター、readonly な ref、computed）は受け取れないため、event.preventDefault() を呼んで event.result を自分で適用してください。そこでのドロップをライブラリに任せたままにすると開発ビルドで警告が出て、そのドロップは何も変更しません。
(item: T) => Keyデフォルト：item.id。プリミティブの場合はアイテムそのもの。makeSortableItem({ item }) のキーにも使われます。
(item: T) => booleantrue を返したアイテムだけを表示します（検索、タグ）：返される items にはそれらだけが入り、ドラッグはその中で並べ替えます。ほかのアイテムはソースの中で自分の位置を保ちます：ドロップは配列全体を書き込み、隠れた各アイテムは、直前にあった表示中のアイテムの後ろに残ります（そのアイテムが移動した場合は、残ったうちで最も近いアイテムの後ろ）。リアクティブ：関数が読み取るもの（検索クエリの ref）はすぐに反映されます。e.to.index と activeIndex は表示中のアイテムで数えます。
Keyデフォルト：useId()。サーバーとクライアントの描画間で安定しています。一度だけ読み取られます。
string値 · ref · ゲッター人がリストを呼ぶ名前：スクリーンリーダー向けのテキストは id の代わりにこれを読み上げます（position 2 of 5 in Garden）。
unknown値 · ref · ゲッタードロップターゲットとしてのリストについて伝えたい任意のデータ：ドラッグが上にある間、イベントは over.data として運びます。
ActivationOptions値 · ref · ゲッターこのリストのアイテムを押下したときのドラッグの始まり方。プロバイダーの activation の代わりに使われます（アイテム自身のものが優先）。押下の開始時に読み取られます。
Component値 · refこのリストのアイテム用のオーバーレイコンポーネント（アイテム自身の overlay が優先）。OverlayProps を受け取り、ほかのリストの上も含め、ドラッグの間ずっと同じものが使われます。ただし、ドラッグの下のターゲットが独自のオーバーレイ（overOverlay）を持つ場合は除きます。ドラッグ中に切り替えた ref は、すぐにそれを入れ替えます。
Component値 · refこのリストが受け入れるドラッグが上にある間、どのリストから来たドラッグでも、オーバーレイに表示するもの：OverlayProps と、デフォルトスロットとしてドラッグ自身のオーバーレイを受け取るコンポーネント（DroppableOptions.overOverlay を参照）。ライブで読み取られます。
DropAnimation値 · refこのリストのアイテムのドラッグが終わったときのオーバーレイの着地の仕方で、プロバイダーの dropAnimation の代わりに使われます（アイテム自身のものが優先。ドロップターゲットのものは両方より優先）。ドロップ時に読み取られます。
DropAnimation値 · refどのリストから来たかを問わず、このリストにドロップされたときのオーバーレイの着地の仕方：ドラッグされたアイテムとプロバイダーの dropAnimation より優先されます。ドロップ時に読み取られます。
Modifier[]値 · ref · ゲッターこのリストのアイテムのドラッグに使うモディファイア。プロバイダーの modifiers の後に適用されます（アイテム自身の modifiers が優先）：たとえば、縦のリストのアイテムを軸の上に留める [restrictToVerticalAxis]。ドラッグの開始時に読み取られます。
'x' | 'y'値 · ref · ゲッターこのリストのアイテムのドラッグを 1 つの軸に固定します：縦のリストには 'y'、横のリストには 'x'（アイテム自身の axis が優先）。固定はモディファイアの後に来るため、モディファイアが何をしても保たれます。ドラッグの開始時に読み取られます。
string | SortableGroupOptions<T>グループ名が同じリストどうしはアイテムをやり取りします。デフォルト：独自のグループ。一度だけ読み取られます。
AcceptMode値 · ref · ゲッター複数の型のアイテムのマルチドラッグ：すべて（'all'、デフォルト）と一部（'some'）のどちらが受け入れられる（group.put）必要があるか。
SortableStrategy値 · ref · ゲッターデフォルトは 'vertical'。
SortableBehavior値 · ref · ゲッター'swap'：ドラッグ中のアイテムがホバーしたアイテムとリアルタイムで位置を入れ替えます。その上に戻るか、リストの外に出ると元に戻ります。同じグループで両方が入れ替えを使うリストどうしは、互いにアイテムをやり取りします：ホバーしたアイテムがドラッグ中のアイテムの場所へ移動するため、それは自分のリストから出られ（group.pull: true）、ドラッグ中のアイテムのリストに入れる（group.put）必要があります。マルチドラッグは入れ替えではなく並べ替えになります。デフォルトは 'sort'。
SortablePlaceholder値 · ref · ゲッター'indicator'：リストは動かず、indicator がドロップ先を示します。デフォルトは 'item'。
MultipleMode値 · ref · ゲッターこのリストで始まるドラッグのマルチドラッグモード。デフォルトは 'group'。ドラッグの開始時に読み取られます。
boolean値 · ref · ゲッターfalse：このリストの中ではアイテムを並べ替えられません（パレット）。
(item: T) => Tコピーを作成します（pull: 'clone'、コピー用の修飾キー）。コピーには必須です。
(active: Active) => T | T[]外部からの通常のドラッグ可能な要素を受け入れます：挿入するアイテムを作成します。キーボードでは、リストの方向への矢印キーでドラッグ可能な要素を取り込み（リスト間の移動と同じく、その要素と同じ高さに）、その後、作成されたアイテムはほかのアイテムと同じく位置ごとに動きます。
ページの外からのドラッグ（external）では 2 回呼ばれます：ドラッグ中には行き先を示すアイテムのために（このときわかっているのは active.external.fileTypes と types だけです）、ドロップ時にはデータとともに（active.external.ready）、挿入するもののために。アイテムの配列を返すと、すべてが枠のあった位置に挿入されます：ファイル 1 つにつき 1 つです。
ExternalAccept値 · ref · ゲッターページの外からのドラッグを受け取ります：ファイル、リンク、テキスト（ExternalAccept を参照）。リストは通常のドラッグ可能な要素と同じように createItem で場所を空けるので、createItem が必要です。アプリの別のウィンドウからドラッグされてきた同じグループのアイテム（native）には、どちらのオプションも必要ありません：アイテムそのものとして入ってきます。値、ref、ゲッターで、ライブで読み取られます。
DropOutside値 · ref · ゲッターすべてのターゲットの外へのドロップ：アイテムをプレースホルダーのある場所に置く、キャンセルする、または取り除く。デフォルトは 'placeholder'（placeholder: 'indicator' では 'cancel'）。ドロップ時に読み取られます。
LayoutAnimation値 · refこのリストの FLIP アニメーション。デフォルト：プロバイダーの animation。値または ref（関数はカスタムアニメーション）。
AutoAnimation値 · ref · ゲッタードラッグ以外による items の変更をアニメーションさせます：追加、削除、移動、フィルタリングされたアイテム（AutoAnimation を参照）。デフォルト：プロバイダーの animateChanges。そこで設定しない限りオフです。items が変わったときに読み取られます。
boolean値 · ref · ゲッターリスト自身のサイズはアイテムに追従します：ドラッグがアイテムを持ち込んだり持ち出したりすると（ドロップ時や、animateChanges が見せる変化でも）、ジャンプする代わりに animation の時間とイージングで新しいサイズへ伸び縮みし、周りのものも一緒に動きます。デフォルトは true。false ならジャンプします。変化のたびに読み取られます。
boolean | AutoScrollOptions値 · ref · ゲッターこのリストのスクロールコンテナーについて、プロバイダーの autoScroll を上書きします。ドラッグの開始時に読み取られます。
MaybeElementRefリストの代わりにドロップを受け付ける要素。デフォルトはリストの要素自体です：たとえば短いカードのリストを囲む列全体にすれば、最後のカードの下で離したカードもリストに（末尾に）着地します。アイテムはリストの要素の中に留まります。
boolean値 · ref · ゲッターtrue：アイテムをドラッグできず、アイテムを受け入れもしません。
( event: SortableDropEvent<T>, ) => MaybePromise<BeforeDropResult>このリストへのドロップの前、および dropOutside: 'remove' がアイテムを取り出す前に問い合わせます：false で拒否し（アイテムは元の位置に戻ります）、一部のキーを返すとそれらだけを受け入れます。非同期にできます：オーバーレイはドロップされた場所で待機します。エラーが発生した場合もドロップは拒否されます。result と preventDefault については SortableDropEvent を参照してください。
(event: SortableDropEvent<T>) => voidこのリストへのドロップが受け入れられた後、書き込まれる前に呼ばれます：items はまだ古い順序で、event.result が新しい順序です。同期的です：event.preventDefault() を呼ばない限り、戻ると同時に書き込みが行われます。アイテムが取り除かれる場合（to.index が -1）は、アイテムの出どころのリストでも呼ばれます。
返り値
makeSortableList が返すもの。
Keyリストの id：id オプション、または自動で作られた id。
ComputedRef<T[]>ドラフトの順序：元の配列ではなく、これを描画してください。
ComputedRef<boolean>ドラッグがリストの上にあります。
ComputedRef<boolean>何かがドラッグされていて、このリストがそれを受け入れます。
ComputedRef<SortableIndicator | null>インジケーターモード：このリストでのドロップ先。ここでなければ null。
ComputedRef<Key | null>仮想化ライブラリがマウントしたままにすべき行：位置がこのリストにある間はその位置（コピー、作成されたアイテム）、それ以外はドラッグされたアイテム。ドラッグがなければ null。
ComputedRef<number>このリストのドラフトにおけるアクティブなアイテムのインデックス。ここにない場合は -1。
ComputedRef<Size | null>ドラッグ開始時のドラッグされたアイテムのサイズ：たとえば、それが占める仮想行のサイズに使います。
() => voidライブラリによらないレイアウトの変化（たとえば仮想化ライブラリの再計測）をアニメーションさせます。
グループ
リストのグループ：アイテムをやり取りするリストと、このリストからアイテムが出たり入ったりできるかどうか。
string同じ名前のリストとツリーはアイテムをやり取りします。
boolean | 'clone'アイテムがこのリストから出られるか：移動、コピー（'clone'、パレット）、またはまったく出られない。
boolean | string | string[] | ((context: SortablePutContext<T>) => boolean)アイテムがこのリストに入れるか：true（デフォルト）、false、アイテムが持つべき型（1 つまたは複数。ドロップターゲットの accept と同じく、acceptMode ですべてか一部かを決めます）、またはドラッグを受け取る関数。
関数の group.put に渡されるもの：リストに入ろうとしているアイテム。
ドロップイベント
onBeforeDrop と onDrop が受け取るもの。
並べ替え可能なリストまたはツリーへのドロップ。フックは順番に実行されます：onBeforeDrop が判断し、onDrop に通知され、次にデフォルトのアクションが、result が示すすべてのリストの items に書き込み、オーバーレイが着地します。どちらかのフックで preventDefault() を呼ぶとその書き込みがスキップされるため、result を自分で適用できます。
Key[]ドラッグされたアイテムのキー。
T[]着地するアイテム：ドラッグされたもの、そのコピー（mode: 'copy'）、または createItem が作ったアイテム（'insert'）。
Key[]確定するキー：すべて。ただし、リストか onBeforeDrop が一部だけを受け入れた場合を除きます。
Key[]元の位置に戻るキー。
{ list: Key | null; index: number }ドラッグの開始位置：アクティブなアイテムのリストとインデックス。外部からの通常のドラッグ可能な要素では list は null です。
{ list: Key; index: number }何も着地しなかった場合、index は -1 です：アイテムがリストから出ていきました（e.source.remove()、dropOutside: 'remove'）。
booleanドロップが、ドラッグを始めたリストの中にとどまります。
DragModeドロップが何をするか（DragMode を参照）。
{ key: Key; item: T; from: { list: Key; index: number }; to: { list: Key; index: number } }mode: 'swap'：ドラッグ中のアイテムと入れ替わったアイテム。逆方向に動き、from はドラッグ中のアイテムが占めた場所（上の to）、to はドラッグ中のアイテムが始まった場所（上の from）です。リスト間では、ドラッグ中のアイテムのリストへ移動します。
ReadonlyMap<Key, T[]>ドロップで変わるすべてのリストの新しいアイテム。リストの id がキーです：デフォルトの書き込みがそれらの items に入れるものそのもので、新しい配列として渡されます。移動、コピー、作成されたアイテム、一部の受け入れ、入れ替えの両側、取り除かれたアイテム（アイテム内のターゲットでの e.source.remove()、ゴミ箱ゾーン、dropOutside: 'remove'）はすべて含まれ、ドロップで変わらないリストは含まれません。ツリーのエントリーは新しいルート配列です：変更されたパス上のノードはコピー（withChildren）で、変更のないサブツリーは共有され、あなたのノードが変更されることはありません。onBeforeDrop では、フックが答える前の時点のドロップです（一部のキーを返すと変わります）。onDrop は最終的なものを受け取ります。
() => voidデフォルトの書き込みを、result のすべてのリストについてスキップします（一部だけに書き込むと、アイテムが失われたり重複したりします）。onDrop の中、または非同期の onBeforeDrop が resolve する前に result を自分で適用すれば、オーバーレイは新しい順序で着地します。どこにも適用しなければ、リストは元のままで、オーバーレイは元の位置に戻ります（まだ場所のないコピーや作成されたアイテムはフェードアウトします）。
booleanonBeforeDrop または onDrop で preventDefault() が呼ばれました。
ExternalDataページの外からのドラッグ（external）：それが運んだもので、データも入っています（ドロップ済みです）。
インジケーター
placeholder: 'indicator' モードで indicator が保持するもの。
placeholder: 'indicator' でのドロップ先：リストは動かず、線はあなたが描きます。
Keyドロップ先のリスト（またはツリー）の id。
number描画されたリストでの挿入位置。
Key | nullインジケーターが付くアイテム。空のリストでは null。
'before' | 'after' | 'inside' | 'swap'ラインが key のどちら側に入るか。'inside'（ツリー）：ドラッグ中のノードを受け入れる行の中央にホバーしていて、ドロップはその行の中に、最初の子として入ります。
numberツリー：ドロップされたノードが得る深さ（ルートは 0）。たとえばラインのインデントに使います。
Key | nullツリー：ドロップされたノードが得る親。ルートの階層では null。
値
並べ替え可能なアイテムのソース。書き込み可能な ref：ライブラリは各ドロップをこれに書き込みます。読み取り専用のもの（ゲッター、readonly な ref、computed：イミュータブルなストア、サーバーの状態、アクション経由でしか変更しないストア）：event.preventDefault() の後、各ドロップを event.result から自分で適用します（SortableDropEvent を参照）。
type SortableItems = Ref<T[]> | Readonly<Ref<readonly T[]>> | (() => readonly T[])リストがアイテムをどう並べるか：列（'vertical'）、行（'horizontal'）、または折り返すグリッド（'grid'）。
type SortableStrategy = 'vertical' | 'horizontal' | 'grid'アイテムの上に来たときの動作：'sort' は場所を空け（間にあるアイテムがずれます）、'swap' は 2 つのアイテムを入れ替えます。
type SortableBehavior = 'sort' | 'swap'ドラッグの行き先の見せ方：'item' では、ドラッグされたアイテムの位置がリストの中を動きます。'indicator' では、リストはそのままで、indicator がドロップ先を示します（線はあなたが描きます）。
type SortablePlaceholder = 'item' | 'indicator'マルチドラッグで、ほかの選択中アイテムがどうするか：
'group'：元の位置を離れ、アクティブなアイテムと一緒に連続したプレースホルダーとして移動します。そのため、ホバー中にリストはすでにドロップの結果を表示しています。'gaps'：ドロップまでその場に留まります。'stack'：オーバーレイの中にまとめられます。
デフォルトのオーバーレイは、ドラッグ中のアイテムをリストに沿った列で表示する（'group'、'gaps'。横方向のリストでは行、グリッドではアクティブなアイテムの後ろの山積み）か、アクティブなアイテムと件数を表示します（'stack'）。
type MultipleMode = 'group' | 'gaps' | 'stack'どのターゲットの上でもない場所でドロップしたときの動作：'placeholder' はアイテムをその位置に残し、'cancel' は元に戻し、'remove' はリストから取り除きます。
type DropOutside = 'placeholder' | 'cancel' | 'remove'