Documentación/Primeros pasos
Inicio rápido
Una lista ordenable en tres archivos — un provider, una lista y sus filas.
Esta página la ha traducido una IA y puede contener imprecisiones. Leer el original en inglés
Aquí tienes todo, funcionando. Arrastra una fila, o llega a una con Tab, pulsa Space, muévela con las flechas y vuelve a pulsar Space.
Cargando la demo…
<script setup lang="ts">
import { DnDProvider } from '@vue-dnd-kit/core';
import TaskList from './TaskList.vue';
</script>
<template>
<!-- The provider goes around the components that drag (often the whole app). -->
<DnDProvider>
<TaskList />
</DnDProvider>
</template>Paso a paso
Envuelve la app en un provider
DnDProvider gestiona el arrastre. Todo composable debe ejecutarse en un componente renderizado
dentro de él — no en el componente cuyo template lo contiene.
Crea una lista
makeSortableList recibe el elemento de la lista y tu array. Devuelve items: un borrador que se
reordena en vivo mientras arrastras. Renderiza el borrador, no tu array, y usa el id como clave de
las filas.
Crea las filas
Cada fila llama a makeSortableItem con su elemento y el ítem que renderiza. Su clave sale de
item.id.
Al soltar, tasks recibe el nuevo orden — es una ref normal, así que el resto de tu app ve el
cambio como cualquier otro.
e.preventDefault() en onDrop y aplica e.result tú mismo.