vue-dnd-kit

Documentação/API

Tipos comuns

Os pequenos tipos aos quais toda página de API se refere — keys, coordenadas, retângulos, refs de elementos e opções reativas.

Editar esta página

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

Opções reativas

A maioria das opções aceita um valor, um ref ou um getter, e é lida quando é necessária: uma mudança vale, no máximo, a partir do próximo arraste. As tabelas as marcam com valor · ref · getter.

Um valor, um getter ou qualquer ref (gravável, shallow, computed, readonly — por exemplo, de useTemplateRef) que a biblioteca apenas lê. Diferente do MaybeRefOrGetter do Vue, aceita Ref<string> onde se espera string | number.

type MaybeReadonlyRefOrGetter = T | Readonly<Ref<T>> | (() => T)

Um valor ou qualquer ref, para opções em que uma função é um valor por si só (um componente de overlay, uma regra de accept, uma animação personalizada), então não dá para distinguir um getter. Guarde componentes em um shallowRef (ou em um computed): o Vue não deve torná-los reativos.

type MaybeReadonlyRef = T | Readonly<Ref<T>>

Elementos

O elemento com que um composable trabalha (makeDraggable(target)): o elemento, um template ref (useTemplateRef) ou um getter. Ele pode mudar (um v-if): a biblioteca o acompanha.

type MaybeElementRef = MaybeReadonlyRefOrGetter<MaybeElement>

Um elemento: um elemento HTML ou SVG, ou uma instância de componente (o elemento raiz dela, $el), como um template ref os entrega. null ou undefined enquanto não há nenhum (ainda não montado).

type MaybeElement = | HTMLElement | SVGElement | ComponentRef | null | undefined

Keys e geometria

Um id ou uma key: de um draggable, de um alvo de drop, de uma lista, de um item de uma lista.

type Key = string | number

Um ponto ou um deslocamento, em px: uma posição a partir do canto superior esquerdo da viewport, ou um deslocamento a partir de onde o arraste começou (delta, transform).

x
number

Horizontal, crescendo para a direita.

y
number

Vertical, crescendo para baixo.

Uma largura e uma altura, em px.

width
number

Largura em px.

height
number

Altura em px.

Uma caixa em px, em coordenadas da viewport, como getBoundingClientRect() a entrega.

top
number

A borda de cima, a partir do topo da viewport.

left
number

A borda esquerda, a partir da esquerda da viewport.

width
number

A largura.

height
number

A altura.

right
number

A borda direita, a partir da esquerda da viewport: left + width.

bottom
number

A borda de baixo, a partir do topo da viewport: top + height.

Status

O que o provider está fazendo:

  • 'idle': nada;
  • 'activating': um pressionamento espera a sua restrição de ativação (uma distância, um toque longo);
  • 'dragging': um arraste está em andamento;
  • 'dropping': um drop está sendo decidido (um onBeforeDrop assíncrono), ou um overlay ainda está pousando;
  • 'selecting': uma área de seleção desenha o seu retângulo.
type DnDStatus = | 'idle' | 'activating' | 'dragging' | 'dropping' | 'selecting'

Como um arraste se move, seja qual for o sensor que o conduz (SensorActivation.type): 'pointer' segue pontos, 'keyboard' se move de item em item.

type SensorType = 'pointer' | 'keyboard'

O tipo de ponteiro que pressionou (PointerEvent.pointerType): a ativação é definida por tipo.

type PointerKind = 'mouse' | 'touch' | 'pen'

Um valor, ou uma promise dele: o que um hook que pode ser assíncrono retorna (onBeforeDrop).

type MaybePromise = T | Promise<T>