Introducción

Vue DnD Kit es arrastrar y soltar para Vue 3. Listas ordenables, tableros kanban, árboles, multi-drag, copia y zonas de drop — animados, preparados para el teclado y anunciados a los lectores de pantalla de serie, en tu propio marcado.

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

<template>
  <DnDProvider>
    <Trip />
  </DnDProvider>
</template>

Nada de esto es código propio de la demo: las listas se reordenan en vivo, las columnas intercambian paradas (un solo group), una selección viaja junta (selected), Alt convierte un movimiento en una copia (clone), y el teclado lo hace todo de hueco en hueco. La demo renderiza las paradas y pasa unas pocas opciones.

Qué es

Un conjunto de composables y un único componente provider. Tú renderizas tus propios elementos y pasas sus refs de plantilla a los composables; la biblioteca se encarga del resto: la entrada de puntero, táctil y de teclado, encontrar el destino, reordenar, animar, el desplazamiento automático y avisar a los lectores de pantalla de lo que ha pasado.

<script setup lang="ts">
const listRef = useTemplateRef<HTMLElement>('list');
// `items` is the draft: it reorders while you drag. On drop, `day.stops` gets the new order.
const { items } = makeSortableList(listRef, { items: toRef(props.day, 'stops'), group: 'trip' });
</script>

<template>
  <ul ref="list">
    <StopCard v-for="stop in items" :key="stop.id" :stop="stop" />
  </ul>
</template>

No renderiza nada propio salvo un overlay flotante — por defecto, un clon del elemento que se arrastra. Tu marcado y tus estilos siguen siendo tuyos: la biblioteca añade atributos ARIA y unos pocos atributos data-dnd-* para dar estilo a los estados de un arrastre.

Qué obtienes

• Listas y cuadrículas ordenables que se reordenan en vivo mientras arrastras, en vertical, en horizontal o en cuadrícula.
• Listas que comparten ítems: tableros kanban, paletas que reparten copias, intercambios, reglas sobre qué va dónde.
• Árboles con anidamiento arrastrando hacia un lado o pasando sobre una fila, límites de profundidad y reglas.
• Multi-drag con tu propia selección (Ctrl/Cmd-clic, un rectángulo de selección): el bloque viaja junto.
• Zonas de drop con reglas de aceptación, y drops que confirmas, rechazas o aplicas tú mismo.
• Animaciones por defecto: los ítems se deslizan a su nuevo sitio, el drop aterriza en su hueco y una cancelación vuelve a su sitio.
• Accesibilidad: arrastre con teclado por huecos, anuncios en vivo, atributos ARIA.
• Listas virtuales con TanStack Virtual o VueUse: miles de filas.
• Sensores y acciones: tus propios dispositivos de entrada, y arrastres programados desde el código.
• DevTools: una pestaña con un mapa en vivo de cada lista, un joystick y un registro de cada arrastre.

Qué lo hace diferente

• Tus datos siguen siendo tuyos hasta el drop. Renderizas un borrador de tu array. Mientras arrastras, solo se mueve el borrador; al soltar, la biblioteca escribe el nuevo orden en tu ref, o te entrega e.result para que lo apliques tú (stores, servidores, deshacer).
• Sin componentes envoltorio. Las filas son tus elementos, con una ref y una sola llamada, así que los componentes de un kit de UI (Nuxt UI, Vuetify, el tuyo) se arrastran tal cual.
• Animado por defecto, sin estorbar nunca. Las reordenaciones, los aterrizajes y las cancelaciones se animan de serie; desactívalos, ajústalos o pásaselos a GSAP o a motion.
• El teclado no es un añadido de última hora. Cada arrastre se puede hacer con Space y las flechas, los movimientos se anuncian y el foco vuelve a donde estaba.
• Un solo provider para toda la app. Las áreas dan a partes de la página sus propias reglas (un eje, límites, una cuadrícula, una pulsación más larga), así que las funciones anidadas no necesitan providers anidados.
• La entrada es enchufable. El puntero y el teclado son sensores; escribe el tuyo para un mando o un comando de voz, o mueve ítems desde el código con @vue-dnd-kit/actions.

Cómo encaja todo

Requisitos

• Vue 3.5 o posterior.
• Navegadores modernos: Chrome y Edge 104+, Safari 15.4+, Firefox 104+.
• Funciona con SSR y Nuxt: el overlay y la región viva se montan en el cliente.

Siguiente paso: instálalo y luego crea una primera lista en el Inicio rápido.