---
title: "Ejemplos"
description: "Demos en vivo con su código — cada archivo que ves se ejecuta en la página. Cópialos o ábrelos en StackBlitz."
canonical_url: "https://zizigy.github.io/vue-dnd-kit/es/docs/examples"
---

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

Cada ejemplo es una pequeña app de Vue: un `index.vue` con su `DnDProvider`, y los componentes que
necesita. Las pestañas de código bajo una demo son exactamente los archivos que la ejecutan.

## Apps

Interfaces completas, tal como las construirías: varias listas, reglas, overlays y el teclado
trabajando juntos.

<card-group>
<card icon="i-lucide-square-kanban" title="Tablero de proyecto" to="/docs/examples/board">

Columnas que reordenas, límites WIP, una confirmación antes de Done, selección múltiple y una
papelera.

</card>

<card icon="i-lucide-calendar-days" title="Calendario semanal" to="/docs/examples/calendar">

Eventos que se arrastran entre días y medias horas, ajustados a la cuadrícula.

</card>

<card icon="i-lucide-folder-open" title="Gestor de archivos" to="/docs/examples/file-manager">

Un árbol de carpetas y una cuadrícula de archivos: selección con rectángulo, drops sobre carpetas,
Alt para copiar.

</card>

<card icon="i-lucide-blocks" title="Editor de bloques" to="/docs/examples/block-editor">

Bloques al estilo de Notion que se mueven por sus asas, se anidan y se arrastran desde un menú
«/» o la barra lateral.

</card>

<card icon="i-lucide-chess-knight" title="Ajedrez" to="/docs/examples/chess">

Los movimientos legales se iluminan, la pieza en la mano dice por qué se rechaza una casilla, un
peón pregunta en qué se convierte, y un bot responde con arrastres reales.

</card>

<card icon="i-lucide-text-cursor-input" title="Constructor de formularios" to="/docs/examples/form-builder">

Campos de Nuxt UI desde una paleta, colocados uno al lado del otro en filas, rellenados en una
vista previa en vivo y exportados como código Vue.

</card>

<card icon="i-lucide-pen-tool" title="Lienzo de diseño" to="/docs/examples/design-canvas">

Frames y capas en un lienzo con zoom, guías inteligentes, Alt para duplicar, y un panel de capas
que es el árbol del diseño.

</card>

<card icon="i-lucide-layout-template" title="Constructor de páginas" to="/docs/examples/page-builder">

Secciones que se convierten en lo real sobre la página, elementos entre columnas, un árbol de
capas sobre los mismos datos, edición en línea.

</card>

<card icon="i-lucide-table-2" title="Tabla de datos" to="/docs/examples/data-table">

Una tabla de Nuxt UI con 2000 tareas: virtualizada, con búsqueda, ordenada por las asas de sus filas.

</card>
</card-group>

## Sitemap

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