function makeDragArea( target: MaybeElementRef, options?: DragAreaOptions,): DragAreaReturn;要素をドラッグエリアにします：その中で始まるドラッグ（ドラッグ可能な要素と並べ替え可能なアイテム）は、そのルールに従います（DragAreaOptions を参照）。これで 1 つのプロバイダーがアプリ全体を受け持てます。ボード、キャンバス、フィードがそれぞれのやり方でドラッグします。エリアがネストしている場合は、最も近いエリアが優先されます。
const board = useTemplateRef<HTMLElement>('board');
makeDragArea(board, { restrictToArea: true, modifiers: [snapToGrid(24)] });
内側のエリアは disabled を継承します。それ以外のルールはすべて最も近いエリアから取られます。軸、境界、グリッドを参照してください。
エリアの中のチップはそのルールに従い、外にあるチップは自由にドラッグできます。
デモを読み込み中…
<script setup lang="ts">
import { DnDProvider } from '@vue-dnd-kit/core';
import AreaDesk from './AreaDesk.vue';
</script>
<template>
<!-- One provider for everything: the area changes the rules only for the drags that start in it. -->
<DnDProvider>
<AreaDesk />
</DnDProvider>
</template>オプション
makeDragArea のオプション：エリアの要素の内側で始まるドラッグ（ドラッグ可能な要素も並べ替え可能なアイテムも同様）のルールです。これにより、1 つのプロバイダーでアプリ全体をまかないながら、ページの各部分で独自のドラッグの仕方ができます。エリアがネストしている場合は、最も近いエリアが優先されます。
どのオプションも値、ref、ゲッターを受け付け、必要になったとき、つまり押下の開始時（activation、disabled）またはドラッグの開始時に読み取られます。
'x' | 'y'値 · ref · ゲッターモディファイアの後に、ドラッグを 1 つの軸に固定します。ドラッグ可能な要素自身の axis（またはそのリストのもの）が優先されます。
Modifier[]値 · ref · ゲッタードラッグのモディファイア。プロバイダーのものの後、ドラッグ可能な要素自身のもの（またはそのリストのもの）の前に実行されます：たとえばボードに [snapToGrid(20)]。
boolean値 · ref · ゲッターtrue：ドラッグはエリアの要素の内側に留まります（モディファイアの後、軸の固定の前）。
boolean | AutoScrollOptions値 · ref · ゲッターエリアのスクロールコンテナー（要素自体、または最も近いスクロール可能な祖先）について、プロバイダーの autoScroll を上書きします。false でそこでの自動スクロールをオフにします。ほかのオプションと違い、どこで始まったかに関係なく、コンテナーをスクロールさせるすべてのドラッグに適用されます。
ActivationOptions値 · ref · ゲッターポインターの種類ごとのドラッグのアクティベーション。ドラッグ可能な要素自身のもの（優先）とプロバイダーのものの間に位置します：たとえば、スクロールするフィードでタッチの押下を長くする場合。
boolean値 · ref · ゲッターtrue：エリア内でも、その内側のエリアでもドラッグが始まりません（最も近いエリアから取られるほかのオプションとは異なります）。エリアのドラッグ可能な要素は aria-disabled を報告します。
返り値
makeDragArea が返すもの。
ComputedRef<boolean>このエリアで始まったドラッグが実行中です（ドロップが決まるまで）。
ComputedRef<boolean>自動スクロールがエリアのスクロールコンテナー（要素、または最も近いスクロール可能な祖先）を動かしています。