Documentación/API
Eventos
Lo que llevan los eventos de arrastre — el arrastre activo, el destino, el puntero, dónde está el ítem — y lo que responde onBeforeDrop.
Esta página la ha traducido una IA y puede contener imprecisiones. Leer el original en inglés
Los monitores (useDnDMonitor), los eventos del provider y los hooks de los droppables reciben un
DnDEvent; onDragEnd recibe un DnDEndEvent. Las listas y los árboles ordenables pasan sus
propios eventos de drop
(SortableDropEvent,
SortableTreeDropEvent) a su onBeforeDrop y su
onDrop.
Cargando la 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
Lo que llevan los eventos de arrastre: lo reciben los monitores, los eventos del provider y los hooks de los destinos de drop.
Active<T>El arrastre.
Over | nullEl destino de drop bajo el arrastre; null si no está sobre nada.
CoordinatesPuntero en coordenadas del viewport, tras los modificadores.
CoordinatesDesplazamiento desde el inicio del arrastre, tras los modificadores.
Coordinates | nullDónde está la esquina superior izquierda de la caja arrastrada dentro de over, desde el borde de su padding y con su scroll: el left/top que coloca un ítem con posición absoluta donde se soltó (una nota en un tablero). null cuando no hay nada debajo. De la caja del overlay, o del propio elemento con overlay: false.
DragModeLo que haría un drop: 'move', 'copy' (el pull: 'clone' de una lista, o la tecla de copia mantenida sobre ítems cuya lista puede hacer clone), 'swap' o 'insert'. Un destino de drop simple lo lee para copiar en lugar de mover.
DragSourcePresente cuando los ítems arrastrados vienen de una lista ordenable.
ExternalDataUn arrastre desde fuera de la página: lo que lleva (active.external). Sus datos llegan al soltar.
DnDEndEvent
Lo que recibe onDragEnd (y el onDrop del destino): el evento del drop y cómo fue.
booleanFalso cuando el arrastre terminó fuera de todo destino de drop.
Key[]Ids aceptados por onBeforeDrop (todos los ids arrastrados, salvo que se devolviera un subconjunto).
Key[]Los demás ids arrastrados: onBeforeDrop los dejó fuera y vuelven a su sitio. Vacío cuando los aceptó todos.
'move' | 'copy' | 'link'Un arrastre fuera de la página (native) soltado en otro sitio: lo que ese sitio hizo con él. 'move' saca aquí los ítems de su lista ordenable; 'copy' y 'link' los dejan.
Respuestas de onBeforeDrop
Lo que decide onBeforeDrop:
'accept'(otrue, o nada): el drop se completa;'reject'(ofalse): no hay drop, los ítems vuelven a su sitio;- una lista de ids: solo se aceptan esos ítems, los demás vuelven a su sitio;
'continue': no hay drop, y el arrastre continúa. Con un puntero, el ítem lo vuelve a seguir (sin botón pulsado) y la siguiente liberación lo suelta, basta un clic; al tocar, se vuelve a agarrar; el teclado lo mueve como antes. Escape lo cancela. El drop vuelve a consultaronBeforeDrop.
type BeforeDropResult = boolean | void | Key[] | 'accept' | 'reject' | 'continue'Consulta Decidir un drop.
El arrastre activo
El arrastre en curso: el ítem desde el que empezó y todos los ítems que lleva.
KeyId del ítem desde el que empezó el arrastre.
Key[]Todos los ids arrastrados, empezando por el principal (multi-drag).
DragItem<T>[]Todos los ítems arrastrados, el principal primero.
unknownEl data del ítem desde el que empezó el arrastre.
stringEl label del ítem desde el que empezó el arrastre, el nombre que le da la gente.
string[]El type normalizado del ítem desde el que empezó el arrastre; vacío significa que encaja en cualquier destino de drop.
HTMLElementElemento desde el que empezó el arrastre. Puede quedar desconectado del DOM (listas virtuales, movimientos entre listas).
RectRectángulo de layout de element al inicio del arrastre.
SensorTypeCómo se mueve el arrastre: 'pointer' sigue puntos, 'keyboard' avanza de ítem en ítem (SensorActivation.type).
ExternalDataUn arrastre desde fuera de la página (archivos, un enlace, texto o ítems de otra ventana de la app): lo que lleva. Sus items se crean para él (element es un sustituto).
booleanEl arrastre propio del navegador (native, o uno de fuera): el navegador dibuja la imagen arrastrada, y no hay overlay.
Un ítem arrastrado: aquel desde el que empezó el arrastre, u otro de un multi-drag.
KeyId de su elemento arrastrable (la clave de un ítem ordenable).
TEl objeto del ítem cuando el arrastre viene de una lista ordenable.
unknownSu opción data.
stringSu label, el nombre que le da la gente.
string[]type normalizado del elemento arrastrable; vacío significa que encaja con cualquier destino de drop.
El destino
El destino de drop bajo el arrastre.
KeyId del destino de drop.
unknownLa opción data del destino.
stringEl label del destino, el nombre que le da la gente.
HTMLElementEl elemento del destino.
RectEl rectángulo de element, medido durante el arrastre.
booleanSi la regla accept del destino acepta los ítems arrastrados.
El origen
De dónde vienen los ítems arrastrados, cuando es una lista ordenable.
Lo que hace un drop: 'move', 'copy' (los ítems se quedan y entran copias suyas), 'swap' (behavior: 'swap': dos ítems intercambian sus sitios) o 'insert' (un elemento arrastrable simple entra en una lista como el ítem que creó su createItem).
type DragMode = 'move' | 'copy' | 'swap' | 'insert'