function makeSelectionArea( target: MaybeElementRef, options?: SelectionAreaOptions,): SelectionAreaReturn;要素を、その中のドラッグ可能な要素のための範囲選択エリアにします。矩形は自分で描画してください：<div v-if="isSelecting" class="band" :style="style" />。
<script setup lang="ts">
const area = useTemplateRef<HTMLElement>('area');
const { isSelecting, style } = makeSelectionArea(area);
</script>
<template>
<div ref="area" class="area">
<!-- items -->
<div v-if="isSelecting" class="band" :style="style" />
</div>
</template>
エリアの空いている場所を押すと選択枠が始まります。マルチドラッグと選択を参照してください。
Live
デモを読み込み中…
<script setup lang="ts">
import { DnDProvider } from '@vue-dnd-kit/core';
import ShapeBoard from './ShapeBoard.vue';
</script>
<template>
<DnDProvider>
<ShapeBoard />
</DnDProvider>
</template>オプション
makeSelectionArea のオプション。枠はプロバイダーの選択、つまりマルチドラッグと selected が読むもの（useDnD().selection）に選択を加えます。modifier、strategy、accept、disabled は値、ref、ゲッター（accept：値または ref。関数はルール）を受け付け、押下で枠が始まるときに読み取られます。disabled をオンにすると、描画中の枠もキャンセルされます。
SelectionModifier値 · ref · ゲッター押下で枠を描くために押しておく必要があるキー。デフォルト：なし。空いている場所でのどの押下でも枠を描きます。
SelectionStrategy値 · ref · ゲッターデフォルトは 'toggle'。
AcceptRule値 · ref枠がどのドラッグ可能な要素を選択するか。ドロップターゲットと同じ照合方法です。
boolean値 · ref · ゲッターtrue：押下しても枠を描きません。
(ids: Key[]) => void枠が終わりました：現在選択されているすべての id を受け取ります。
返り値
makeSelectionArea が返すもの。
ComputedRef<boolean>枠を描いている最中です：このときに枠を描画してください。
ComputedRef<Record<string, string>>選択矩形の要素のスタイル（絶対配置、コンテナー基準）。
値
'toggle'：枠が横切ったアイテムは、枠を描く前の状態から選択が反転します。'select'：枠の内側のアイテムだけが選択されます。
type SelectionStrategy = 'toggle' | 'select'