Documentação/API

makeSelectionArea

Um retângulo de seleção que seleciona os draggables que toca — arraste um deles e a seleção inteira vai junto.

Esta página foi traduzida por IA e pode conter imprecisões. Ler o original em inglês

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

Torna um elemento uma área de seleção por retângulo para os draggables dentro dele. Renderize o retângulo você mesmo: <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>

Pressionar o espaço vazio da área inicia o retângulo. Veja Multi-drag e seleção.

Live Desenhe um retângulo no espaço vazio, depois arraste uma forma selecionada

Carregando a demo…

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

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

Opções

Opções de makeSelectionArea. O retângulo seleciona na seleção do provider, a mesma que o multi-drag e selected leem (useDnD().selection). modifier, strategy, accept e disabled aceitam um valor, um ref ou um getter (accept: um valor ou um ref, uma função é uma regra) e são lidos quando um clique inicia um retângulo; ligar disabled também cancela um que esteja em andamento.

modifier?

SelectionModifiervalor · ref · getter

Teclas que precisam estar pressionadas para um clique desenhar um retângulo. Padrão: nenhuma, qualquer clique no espaço vazio desenha.

strategy?

SelectionStrategyvalor · ref · getter

Padrão 'toggle'.

accept?

AcceptRulevalor · ref

Quais draggables o retângulo seleciona; o mesmo comparador dos alvos de drop.

disabled?

booleanvalor · ref · getter

true: os cliques não desenham nenhum retângulo.

onSelected?

(ids: Key[]) => void

O retângulo terminou: recebe todos os ids selecionados agora.

Retorno

O que makeSelectionArea retorna.

isSelecting

ComputedRef<boolean>

Um retângulo está sendo desenhado: renderize-o nesse momento.

style

ComputedRef<Record<string, string>>

Estilo para o elemento do retângulo de seleção (absoluto, relativo ao contêiner).

Valores

'toggle': os itens que o retângulo cruza invertem o estado que tinham antes do retângulo;
'select': só os itens dentro do retângulo ficam selecionados.

type SelectionStrategy = 'toggle' | 'select'

Teclas (KeyboardEvent.key ou .code) que precisam estar pressionadas para que um clique desenhe um retângulo: todas elas, ou 'some' delas.

keys

string[]

As teclas, como KeyboardEvent.key ('Shift') ou .code ('KeyA'). Nenhuma: qualquer clique desenha.

method

'every' | 'some'

'every': todas as keys precisam estar pressionadas; 'some': uma delas basta.