---
title: "Introducción"
description: "Vue DnD Kit es arrastrar y soltar para Vue 3 — listas ordenables, tableros kanban, árboles, multi-drag y zonas de drop, con animaciones y accesibilidad de serie."
canonical_url: "https://zizigy.github.io/vue-dnd-kit/es/docs/getting-started/introduction"
---

> Index of every page on this site: [llms.txt](https://zizigy.github.io/vue-dnd-kit/llms.txt)

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.

<example height="27rem" hint="Mueve paradas entre los días; las etiquetas de abajo nombran los otros gestos" name="at-a-glance" title="De un vistazo">



</example>

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`),
<kbd value="Alt">



</kbd>

 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.

```vue [Day.vue]
<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
<kbd value="Space">



</kbd>

 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

<table>
<thead>
  <tr>
    <th>
      Pieza
    </th>
    
    <th>
      Qué hace
    </th>
  </tr>
</thead>

<tbody>
  <tr>
    <td>
      <code>
        DnDProvider
      </code>
    </td>
    
    <td>
      Gestiona el arrastre: la entrada, el overlay, la selección, el desplazamiento automático, los anuncios.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        makeSortableList
      </code>
      
       / <code>
        makeSortableItem
      </code>
    </td>
    
    <td>
      Una lista que se reordena, y sus filas.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        makeSortableTree
      </code>
    </td>
    
    <td>
      Un árbol, renderizado en plano con profundidades.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        makeDraggable
      </code>
      
       / <code>
        makeDroppable
      </code>
    </td>
    
    <td>
      Arrastre libre y zonas de drop.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        makeDragArea
      </code>
    </td>
    
    <td>
      Reglas para una parte de la página: eje, límites, ajuste a una cuadrícula, desplazamiento automático, activación.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        makeSelectionArea
      </code>
    </td>
    
    <td>
      Selección con rectángulo.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        useDnD
      </code>
      
       / <code>
        useDnDMonitor
      </code>
    </td>
    
    <td>
      El estado del arrastre y sus eventos, en cualquier lugar bajo el provider.
    </td>
  </tr>
</tbody>
</table>

<tip>

¿Vienes de la v2? La API ha cambiado: `useDnDProvider` pasó a ser `useDnD`, y `makeConstraintArea`
y `makeAutoScroll` pasaron a ser `makeDragArea`. Las listas ordenables ahora vienen incluidas.
Consulta [migrar desde la v2](https://zizigy.github.io/docs/getting-started/migrating-from-v2).

</tip>

## 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](https://zizigy.github.io/docs/getting-started/installation) y luego crea una primera lista en
el [Inicio rápido](https://zizigy.github.io/docs/getting-started/quick-start).

## Sitemap

See the full [sitemap](https://zizigy.github.io/vue-dnd-kit/sitemap.md) for all pages.