function makeDroppable<TData = unknown>( target: MaybeElementRef, options?: DroppableOptions<TData>,): DroppableReturn;要素をドロップターゲットにします。
const zone = useTemplateRef<HTMLElement>('zone');
const { isOver, isAccepting } = makeDroppable(zone, {
accept: 'image',
onDrop: (e) => move(e.active.id),
});
デモを読み込み中…
<script setup lang="ts">
import { reactive } from 'vue';
import { DnDProvider, type Key } from '@vue-dnd-kit/core';
import FileChip from './FileChip.vue';
import Zone from './Zone.vue';
import { FILES } from './files';
/** Which zone each file is in. */
const where = reactive<Record<string, string>>(Object.fromEntries(FILES.map((file) => [file.id, 'desk'])));
const filesIn = (zone: string) => FILES.filter((file) => where[file.id] === zone);
const move = (zone: string, file: Key) => (where[String(file)] = zone);
</script>
<template>
<DnDProvider>
<div class="zones">
<Zone title="Desktop" rule="takes anything" class="desk" @drop="move('desk', $event)">
<FileChip v-for="file in filesIn('desk')" :key="file.id" :file="file" />
</Zone>
<Zone title="Images" rule="accept: 'image'" accept="image" @drop="move('images', $event)">
<FileChip v-for="file in filesIn('images')" :key="file.id" :file="file" />
</Zone>
<Zone title="Media" rule="accept: ['image', 'audio']" :accept="['image', 'audio']" @drop="move('media', $event)">
<FileChip v-for="file in filesIn('media')" :key="file.id" :file="file" />
</Zone>
<Zone title="Archive" rule="disabled: true" disabled @drop="move('archive', $event)" />
</div>
</DnDProvider>
</template>
<style scoped>
.zones {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 12px;
width: min(720px, 100%);
}
.desk {
grid-column: 1 / -1;
}
@media (max-width: 560px) {
.zones {
grid-template-columns: minmax(0, 1fr);
}
}
</style>オプション
makeDroppable のオプション。
アイテムの中へのドロップ。並べ替え可能なアイテムの要素（またはその中）にあるドロップターゲットは、ほかの場所と同じように動きますが、そのアイテムのリストがドラッグを並べ替えようとしている間は 1 つのルールがあります：ターゲットが有効になるのは、ポインターがアイテムの中央（リストの軸方向で 25〜75%。グリッドでは x）にある間だけで、そこではドロップがターゲットの中に入り、リストはそのために動きません。アイテムの端の近くでは、リストはいつもどおり並べ替えます。accept がドラッグを拒否するターゲットは対象外になるので、リストはそのアイテムの上でもほかのアイテムと同じように並べ替えます（無効にする必要はありません）。キーボードは、アイテムを越えて進む前にこのようなターゲットで止まります。ドラッグは、自分が運んでいるものをターゲットにすることはありません：ドラッグされたアイテムの中（または上）にあるターゲットも、ドラッグされたアイテムが着地する位置の中にあるターゲットも対象外です。onDrop でアイテムをリストから取り除くには、e.source.remove() を呼びます。
コールバック以外のすべてのオプションは値、ref、ゲッター（accept、overOverlay、overDropAnimation：値または ref）を受け付け、ドラッグがターゲットを探している間、ライブで読み取られます。
Key値 · ref · ゲッターデフォルト：useId()。サーバーとクライアントの描画間で安定しています。
TData値 · ref · ゲッターターゲットについて伝えたい任意のデータ：イベントは over.data として運びます。
string値 · ref · ゲッター人が呼ぶ名前：スクリーンリーダー向けのテキストは id の代わりにこれを読み上げます（over Trash）。イベントでは over.label に入ります。
AcceptRule値 · refこのターゲットが何を受け入れるか。並べ替え可能なアイテムの中では、ドラッグを拒否するターゲットはリストがその上で並べ替えるのを許します。値または ref：関数はルールです。
AcceptMode値 · ref · ゲッターデフォルトは 'all'。
boolean値 · ref · ゲッターtrue：ドラッグは、このターゲットがないかのように上を通り過ぎます。
number値 · ref · ゲッターターゲットがネストせずに重なっている場合、値が大きいほうが優先されます（デフォルトは 0）。並べ替え可能なアイテムはコンテナーに勝ちます。
Component値 · refこのターゲットが受け入れるドラッグが上にある間、オーバーレイに表示するもの：OverlayProps を受け取るコンポーネントで、ドラッグ自身のオーバーレイ（ドラッグされたアイテムのコンポーネント、プロバイダーのスロット、またはクローン）の代わりに描画されます。ドラッグ自身のオーバーレイはデフォルトスロットとして受け取り、包むことも省くこともできます（<slot />）。ドロップがここに着地する間も残ります。オーバーレイのないドラッグ（overlay: false）は、オーバーレイがないままです。値または ref で、ライブで読み取られます。コンポーネントの切り替えは、プロバイダーの overlayTransition でアニメーションします。（ドラッグ可能な要素、アイテム、リストでは、overlay はドラッグ自身のオーバーレイです。並べ替え可能なリストとツリーも、こちらを overOverlay として受け付けます。）
DropAnimation値 · refここにドロップされたときのオーバーレイの着地の仕方で、ドラッグされたアイテムとプロバイダーの dropAnimation の代わりに使われます：false ならドロップされた場所に留まり（オーバーレイコンポーネント自身のアニメーション、たとえばしぶきがそこで再生されます）、関数ならそれでアニメーションします。値または ref で、ドロップ時に読み取られます。
(event: DnDEvent) => voidドラッグがこのターゲットの上に来ました。ターゲットがドラッグを受け入れるかどうかは問いません（event.over.accepted）。
(event: DnDEvent) => voidドラッグがこのターゲットから離れました。
(event: DnDEvent) => MaybePromise<BeforeDropResult>このターゲットへのドロップが確定する前に、モニターの onBeforeDrop の後で呼ばれます。ターゲットがドラッグを受け入れる場合のみです（BeforeDropResult を参照）。非同期にできます：オーバーレイはドロップされた場所で待ちます。エラーはドロップを拒否します。
(event: DnDEndEvent) => voidこのターゲットへのドロップが確定しました：その意味する処理を行います（アイテムの移動、ファイルのアップロード）。onBeforeDrop がドラッグされたアイテムの一部だけを受け入れた場合、event.accepted にはその id が、event.rejected にはそれ以外の id が入り、後者は元の位置に戻ります。active は引き続きドラッグ全体です。
ExternalAccept値 · ref · ゲッターページの外からのドラッグを受け取ります：デスクトップからのファイル、別のアプリやタブからのリンクやテキスト（ブラウザーのドラッグ＆ドロップ）。これらはライブラリのドラッグと同じように動き（isOver、isAccepting、イベント）、ドロップ時には e.external にデータが入ります。external のないターゲットはこれらを無視します。値、ref、ゲッターで、ライブで読み取られます。
返り値
makeDroppable が返すもの。
ComputedRef<Key>ターゲットの id：id オプション、または自動で作られた id。
ComputedRef<boolean>ドラッグが上にあります（external があれば、ページの外からのドラッグも）。
ComputedRef<boolean>何かがドラッグされていて、このターゲットがそれを受け入れます。
ComputedRef<Placement | null>ホバーされている間の、ターゲットの各半分に対するポインターの位置。
受け入れのルール
'*' または省略ですべてを受け入れます。型のないアイテムは、どの文字列ルールにも当てはまります（v2 の groups: [] と同じ挙動）。
type AcceptRule = | '*' | string | string[] | ((context: AcceptContext) => boolean)関数の accept ルールに渡されるもの。
'all'：ドラッグ中のすべてのアイテムが一致する必要があります。'some'：少なくとも 1 つ（残りは onBeforeDrop で拒否できます）。
type AcceptMode = 'all' | 'some'ページの外から
ページの外から来るドラッグから external が受け取るもの、そしてそのようなドラッグが運ぶもの（e.external）。ファイルとほかのアプリを参照してください。
ドロップターゲット、リスト、ツリーが、ページの外から来るドラッグから受け取るもの：デスクトップからのファイル、別のアプリやタブからのリンクやテキスト（external）。
boolean | string | readonly string[] | ((file: ExternalFile) => boolean)ファイル：true ならすべて受け取ります。または <input accept> と同じ形式：MIME タイプ（image/*、application/pdf）と拡張子（.md）を、カンマ区切りの文字列か配列で指定します。拡張子はドロップ時に確認されます。または、ファイルごとに呼ばれる関数（false で拒否）。フォルダーは決して受け取りません。
boolean一度に複数のファイル（デフォルトは true）。false は 2 つ以上のファイルのドラッグを拒否します。
booleanリンク（text/uri-list）：別のタブからドラッグされたアドレス、ページ内のリンク。
booleanプレーンテキスト（text/plain）：別のアプリからドラッグされた選択範囲。
readonly string[]受け取るそのほかの MIME タイプ。ほかのアプリが提供するとおりに指定します。
ページの外からのドラッグ（Active.external、DnDEvent.external）。ドラッグ中、ブラウザーは何を運んでいるかは教えますが、データは教えません：ファイル、リンク、テキストはドロップ時に届きます（ready）。
readonly string[]提供している MIME タイプ（Files、text/uri-list、text/plain、アプリ独自のもの）。
readonly string[]ファイルの MIME タイプで、ファイルごとに 1 つ（ブラウザーが判別できない場合は ''）。
readonly File[]ドロップ時：ターゲットが受け取るファイル（フォルダーと拒否されたファイルは除く）。
readonly string[]ドロップ時：リンク（text/uri-list）。
stringドロップ時：プレーンテキスト。
stringドロップ時：HTML。
(type: string) => stringドロップ時：提供している任意のタイプのデータ（ドロップ前と、提供していないタイプでは ''）。
booleanドロップされました：上のデータがそろっています。
stringアプリの別のウィンドウからドラッグされてきたライブラリのアイテム（native）：その並べ替え可能なグループの名前。そのグループのリストは、自分のリストの 1 つから来たかのようにそれらを受け入れます。active.items にそれらが入っています。
外部からのドラッグに含まれるファイルで、ExternalAccept.files に問い合わせるときの形です。ファイルがページの上にある間、ブラウザーが教えるのはタイプだけです：name と size はドロップ時に届きます。