Documentación/API

makeSelectionArea

Un rectángulo de selección que selecciona los elementos arrastrables que toca — arrastra uno de ellos y toda la selección viaja junta.

Editar esta página

Esta página la ha traducido una IA y puede contener imprecisiones. Leer el original en inglés

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

Convierte un elemento en un área de selección con rectángulo para los elementos arrastrables que contiene. Renderiza el rectángulo tú mismo: <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>

Pulsar sobre el espacio vacío del área inicia el rectángulo. Consulta Multi-drag y selección.

Live Dibuja un rectángulo en el espacio vacío y luego arrastra una forma seleccionada

Cargando la demo…

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

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

Opciones

Opciones de makeSelectionArea. El rectángulo selecciona en la selección del provider, la que leen el multi-drag y selected (useDnD().selection). modifier, strategy, accept y disabled aceptan un valor, una ref o un getter (accept: un valor o una ref, una función es una regla) y se leen cuando una pulsación inicia un rectángulo; activar disabled también cancela uno en curso.

modifier?

SelectionModifiervalor · ref · getter

Teclas que hay que mantener para que una pulsación dibuje un rectángulo. Por defecto: ninguna, cualquier pulsación en el espacio vacío dibuja.

strategy?

SelectionStrategyvalor · ref · getter

'toggle' por defecto.

accept?

AcceptRulevalor · ref

Qué elementos arrastrables selecciona el rectángulo; el mismo criterio de coincidencia que los destinos de drop.

disabled?

booleanvalor · ref · getter

true: las pulsaciones no dibujan ningún rectángulo.

onSelected?

(ids: Key[]) => void

El rectángulo terminó: recibe todos los ids seleccionados ahora.

Valor devuelto

Lo que devuelve makeSelectionArea.

isSelecting

ComputedRef<boolean>

Se está dibujando un rectángulo: renderízalo entonces.

style

ComputedRef<Record<string, string>>

Estilo para el elemento del rectángulo de selección (absoluto, relativo al contenedor).

Valores

'toggle': los ítems que atraviesa el rectángulo invierten el estado que tenían antes del rectángulo;
'select': solo se seleccionan los ítems dentro del rectángulo.

type SelectionStrategy = 'toggle' | 'select'

Teclas (KeyboardEvent.key o .code) que hay que mantener para que una pulsación dibuje un rectángulo: todas ellas, o solo alguna ('some').

keys

string[]

Las teclas, como KeyboardEvent.key ('Shift') o .code ('KeyA'). Ninguna: cualquier pulsación dibuja.

method

'every' | 'some'

'every': hay que mantener todas las keys; 'some': basta con una de ellas.