Docs/API

makeSelectionArea

A rubber band that selects the draggables it touches — drag one of them and the whole selection travels.

function makeSelectionArea(  target: MaybeElementRef,  options?: SelectionAreaOptions,): SelectionAreaReturn;

Makes an element a rubber-band selection area for the draggables inside it. Render the rectangle yourself: <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>

A press on the empty space of the area starts the band. See Multi-drag and selection.

Live Draw a box on the empty space, then drag a selected shape

Loading the demo…

<script setup lang="ts">
import { DnDProvider } from '@vue-dnd-kit/core';
import ShapeBoard from './ShapeBoard.vue';
</script>

<template>
  <DnDProvider>
    <ShapeBoard />
  </DnDProvider>
</template>

Options

Options of makeSelectionArea. The band selects into the provider's selection, the one multi-drag and selected read (useDnD().selection). modifier, strategy, accept and disabled take a value, a ref or a getter (accept: a value or a ref, a function is a rule) and are read when a press starts a band; turning disabled on also cancels a running one.

modifier?

SelectionModifiervalue · ref · getter

Keys that must be held for a press to draw a band. Default: none, any press on the empty space draws.

strategy?

SelectionStrategyvalue · ref · getter

Default 'toggle'.

accept?

AcceptRulevalue · ref

Which draggables the band selects; the matcher of drop targets.

disabled?

booleanvalue · ref · getter

true: presses draw no band.

onSelected?

(ids: Key[]) => void

The band ended: gets every id selected now.

Returns

What makeSelectionArea returns.

isSelecting

ComputedRef<boolean>

A band is being drawn: render it then.

style

ComputedRef<Record<string, string>>

Style for the selection rectangle element (absolute, container-relative).

Values

'toggle': items the band crosses flip their state from before the band;
'select': only the items inside the band are selected.

type SelectionStrategy = 'toggle' | 'select'

Keys (KeyboardEvent.key or .code) that must be held for a press to draw a band: every one of them, or 'some' of them.

keys

string[]

The keys, as KeyboardEvent.key ('Shift') or .code ('KeyA'). None: any press draws.

method

'every' | 'some'

'every': all of keys must be held; 'some': one of them is enough.