Documentação/API
Eventos
O que os eventos de arraste trazem — o arraste ativo, o alvo, o ponteiro, onde o item está — e o que o onBeforeDrop responde.
Esta página foi traduzida por IA e pode conter imprecisões. Ler o original em inglês
Os monitores (useDnDMonitor), os eventos do provider e os hooks dos droppables recebem um
DnDEvent; onDragEnd recebe um DnDEndEvent. As listas e árvores ordenáveis passam os seus
próprios eventos de drop
(SortableDropEvent,
SortableTreeDropEvent) para o onBeforeDrop e o onDrop delas.
Carregando a demo…
<script setup lang="ts">
import { ref } from 'vue';
import { DnDProvider } from '@vue-dnd-kit/core';
import { describe, type LoggedEvent } from './describe';
import TaskColumn from './TaskColumn.vue';
import EventInspector from './EventInspector.vue';
const todo = ref([
{ id: 'docs', title: 'Write docs' },
{ id: 'bug', title: 'Fix #42' },
]);
const done = ref([{ id: 'ship', title: 'Ship v3' }]);
// Every event of the drag, described when it fires. A new drag starts a new log;
// moves fire every frame, so they share one entry, which keeps the latest.
const events = ref<LoggedEvent[]>([]);
let count = 0;
const record = (name: string, type: string, payload: unknown) => {
if (name === 'onDragStart') events.value = [];
const lines = describe(type, payload);
const move = name === 'onDragMove' && events.value.find((event) => event.name === name);
if (move) Object.assign(move, { lines, count: move.count + 1 });
else events.value.push({ id: ++count, name, type, lines, count: 1 });
};
</script>
<template>
<DnDProvider>
<div class="demo">
<div class="columns">
<TaskColumn id="todo" v-model="todo" :record="record" />
<TaskColumn id="done" v-model="done" :record="record" />
</div>
<EventInspector :events="events" :record="record" />
</div>
</DnDProvider>
</template>
<style scoped>
.demo {
display: flex;
flex-wrap: wrap;
align-items: flex-start;
justify-content: center;
gap: 16px;
}
.columns {
display: flex;
flex-direction: column;
gap: 10px;
width: 168px;
}
</style>DnDEvent
O que os eventos de arraste carregam: os monitores, os eventos do provider e os hooks dos alvos de drop recebem isto.
Active<T>O arraste.
Over | nullO alvo de drop sob o arraste; null sobre nada.
CoordinatesPonteiro em coordenadas da viewport, depois dos modificadores.
CoordinatesDeslocamento desde o início do arraste, depois dos modificadores.
Coordinates | nullOnde fica o canto superior esquerdo da caixa arrastada dentro de over, a partir da borda do padding dele e com a rolagem dele: o left/top que colocam um item com posicionamento absoluto onde ele foi solto (uma nota em um quadro). null quando não há nada embaixo. Da caixa do overlay, ou do próprio elemento com overlay: false.
DragModeO que um drop faria: 'move', 'copy' (o pull: 'clone' de uma lista, ou a tecla modificadora de cópia segurada com itens cuja lista sabe fazer clone), 'swap' ou 'insert'. Um alvo de drop simples o lê para copiar em vez de mover.
DragSourcePresente quando os itens arrastados vêm de uma lista ordenável.
ExternalDataUm arraste de fora da página: o que ele carrega (active.external). Os dados dele chegam no drop.
DnDEndEvent
O que onDragEnd (e o onDrop do alvo) recebe: o evento do drop e como ele terminou.
booleanFalse quando o arraste terminou fora de todos os alvos de drop.
Key[]Ids aceitos pelo onBeforeDrop (todos os ids arrastados, a menos que um subconjunto tenha sido retornado).
Key[]Os outros ids arrastados: onBeforeDrop os deixou de fora, e eles voltam ao lugar. Vazio quando ele aceitou todos.
'move' | 'copy' | 'link'Um arraste para fora da página (native) solto em outro lugar: o que aquele lugar fez com ele. 'move' tira os itens da lista ordenável deles aqui; 'copy' e 'link' os mantêm.
Respostas do onBeforeDrop
O que o onBeforeDrop decide:
'accept'(outrue, ou nada): o drop é concluído;'reject'(oufalse): nenhum drop, os itens voltam ao lugar;- uma lista de ids: só esses itens são aceitos, os outros voltam ao lugar;
'continue': nenhum drop, e o arraste continua. Com um ponteiro, o item volta a segui-lo (sem nenhum botão pressionado) e o próximo soltar, um clique, o solta; um toque o pega de novo; o teclado o move como antes. Escape o cancela. O drop consulta oonBeforeDropde novo.
type BeforeDropResult = boolean | void | Key[] | 'accept' | 'reject' | 'continue'Veja Decidindo um drop.
O arraste ativo
O arraste em andamento: o item de onde ele começou e todos os itens que ele carrega.
KeyId do item a partir do qual o arraste começou.
Key[]Todos os ids arrastados, começando pelo principal (multi-drag).
DragItem<T>[]Todos os itens arrastados, o principal primeiro.
unknownO data do item de onde o arraste começou.
stringO label do item em que o arraste começou, como as pessoas o chamam.
string[]O type normalizado do item de onde o arraste começou; vazio significa que ele serve para qualquer alvo de drop.
HTMLElementElemento a partir do qual o arraste começou. Ele pode ser desconectado do DOM (listas virtuais, movimentos entre listas).
RectRetângulo de layout de element no início do arraste.
SensorTypeComo o arraste se move: 'pointer' segue pontos, 'keyboard' se move de item em item (SensorActivation.type).
ExternalDataUm arraste de fora da página (arquivos, um link, texto, ou itens de outra janela do app): o que ele carrega. Os items dele são criados para ele (element é um substituto).
booleanO arraste do próprio navegador (native, ou um de fora): o navegador desenha a imagem arrastada, e não há overlay.
Um item arrastado: aquele de onde o arraste começou, ou outro de um multi-drag.
O alvo
O alvo de drop sob o arraste.
A origem
De onde vêm os itens arrastados, quando é uma lista ordenável.
O que um drop faz: 'move', 'copy' (os itens ficam, cópias deles entram), 'swap' (behavior: 'swap': dois itens trocam de lugar) ou 'insert' (um draggable simples entra em uma lista como o item criado pelo createItem dela).
type DragMode = 'move' | 'copy' | 'swap' | 'insert'