デモを読み込み中…
<script setup lang="ts">
import { DnDProvider } from '@vue-dnd-kit/core';
import TokenScene from './TokenScene.vue';
import StateInspector from './StateInspector.vue';
</script>
<template>
<DnDProvider>
<div class="demo">
<TokenScene />
<StateInspector />
</div>
</DnDProvider>
</template>
<style scoped>
.demo {
display: flex;
flex-wrap: wrap;
align-items: flex-start;
justify-content: center;
gap: 16px;
}
</style>useDnD
function useDnD(): DnDState;カスタム UI 向けの読み取り専用のドラッグ状態（有効なターゲットのハイライト、スピナー、進捗）。
const { status, active, over, selection, cancel } = useDnD();
const dragging = computed(() => status.value === 'dragging');
プロバイダーのドラッグの、リアクティブな状態です。active と over は、ドロップが決まった時点で、オーバーレイがまだ着地している間にクリアされます。
ドラッグの状態は、ドロップが決まった時点で終わります：オーバーレイがまだ所定の位置へアニメーションしている間でも、active、over、pointer は null になります（ドロップゾーンも受け入れをやめます）。派生した UI が古いドラッグと新しいデータを混ぜることはありません。非同期の onBeforeDrop が判断している間、状態は離した時点のまま保たれますが、ページはドラッグモードから抜けています：ページ自身のカーソルとテキスト選択が戻り（確認ダイアログは通常どおり動作します）、オーバーレイはドロップされた場所で待機します。
status は、ドラッグの実行中は 'dragging'、そうでなければドロップの判断中またはオーバーレイがまだ着地中の間は 'dropping'、それ以外は 'idle' です（'activating' と 'selecting' は別です）。新しいドラッグは着地を待ちません：すぐに始まり、着地はその周りで完了します。
Readonly<Ref<DnDStatus>>プロバイダーが何をしているか（DnDStatus を参照）。
Readonly<Ref<Active | null>>実行中のドラッグ。ドラッグがないとき、およびドロップが確定した時点で null になります。
Readonly<Ref<Over | null>>ドラッグの下にあるドロップターゲット。何もない上では null。
Readonly<Ref<Coordinates | null>>ビューポート座標でのポインター（モディファイア適用後）。ドラッグがないときは null。
Readonly<Ref<Coordinates | null>>over の中でのドラッグ中のボックスの左上の角の位置。ライブで更新され、移動のたびの DnDEvent.position と同じです。何もない上では null。オーバーレイコンポーネントは、着地する場所（カレンダー上の時刻）を表示するためにこれを読み取ります。
{ progress: Readonly<Ref<number>> }progress：status が 'activating' の間、押下がアクティベーション制約にどこまで近づいたかを 0 から 1 で表します。たとえば、長押しの間に満ちていくリングに使えます。
Readonly<Ref<boolean>>自動スクロールがコンテナーを動かしています。
DnDSelection選択中のドラッグ可能な要素（DnDSelection を参照）。
() => voidドラッグ（元の位置に戻ります）、または保留中のアクティベーションをキャンセルします。
選択
選択中のドラッグ可能な要素（id で管理）：そのうちの 1 つをドラッグすると全部を運びます（マルチドラッグ）。id で保持しているので、選択はアンマウントされても残ります（仮想リスト）。
ReadonlySet<Key>選択中の id。リアクティブです。
(id: Key) => booleanid が選択されているかどうか。
(...ids: Key[]) => voidこれらの id を選択します。
(...ids: Key[]) => voidこれらの id の選択を解除します。
(id: Key, force?: boolean) => voidid を選択するか、選択を解除します。force: true なら選択し、false なら解除します。
(ids: Iterable<Key>) => voidこれらの id だけを選択し、ほかは選択しません。
() => voidすべての id の選択を解除します。
useDnDMonitor
function useDnDMonitor(monitor: DnDMonitor): void;プロバイダー配下のすべてのドラッグのイベントを購読します。呼び出したコンポーネント（またはエフェクトスコープ）が存在する間、有効です。
useDnDMonitor({
onDragEnd: (e) => (e.dropped ? save(e) : undefined),
onBeforeDrop: async (e) => ((await confirm()) ? 'accept' : 'reject'),
});
ドロップ（onBeforeDrop）については、ターゲットより先にあなたのモニターに問い合わせます。ペイロードはイベントのページにあります。
プロバイダー配下のすべてのドラッグに対するフック（useDnDMonitor）。
(event: DnDEvent) => voidアクティベーションを経て、ドラッグが始まりました。
(event: DnDEvent) => voidドラッグが動きました（多くても 1 フレームに 1 回）。
(event: DnDEvent) => voidドラッグの下にあるターゲットが変わりました。
(event: DnDEvent) => MaybePromise<BeforeDropResult>ドロップが確定する前に実行されます（BeforeDropResult を参照）：'reject' で拒否し、id を返すとその一部だけを受け入れます。
(event: DnDEndEvent) => voidドロップが完了したことの通知：並べ替え可能なリストは、それぞれの onDrop を実行し、書き込みを済ませています。
(event: DnDEvent) => voidドラッグがキャンセルされたか、ドロップが拒否されました：アイテムは元の位置に戻ります。
(event: DnDEvent) => voidonBeforeDrop が 'continue' を返した：ドロップは行われず、ドラッグが続きます。
(event: DnDEvent | DnDEndEvent) => void終了したドラッグのオーバーレイが着地しました：ドロップアニメーション（キャンセルなら元の位置へ戻る動き）の後に、onDragEnd（DnDEndEvent）または onDragCancel が受け取ったイベントとともに呼ばれます。その間に次のドラッグが始まっていることもあります：ドラッグは着地を待ちません。
(event: KeyboardEvent, context: KeyboardMoveContext) => MaybePromise<Coordinates | undefined>キーボードドラッグ：矢印キーに対する次のポインター位置（たとえば次の並べ替え位置）。
矢印キーが押されたときに getKeyboardCoordinates に渡されるもの。
useDnDContext と provideDnDContext
function useDnDContext(): DnDContext;このコンポーネントの上にあるプロバイダー。provideDnDContext 用の不透明なハンドルです：プロバイダーをシャドウルートや別の Vue アプリへ橋渡しします。
function provideDnDContext(app: App, context: DnDContext): void;プロバイダー（useDnDContext() から得たもの）を別の Vue アプリと共有します。たとえば、シャドウルートの中にマウントされたアプリです。
// In a component under the provider:
const context = useDnDContext();
// A second Vue app (a widget mounted in a shadow root) joins the same drag:
const widget = createApp(Widget);
provideDnDContext(widget, context);
useDnDContext() が返すプロバイダーで、provideDnDContext() に渡すためのものです：これにより別の Vue アプリ（たとえば shadow root にマウントされたもの）が同じプロバイダーで動作します。中身は不透明です：公開メンバーを持たないため、ライブラリの内部実装によって変わることはありません。