Repolode
Enviar
clauderic

clauderic/dnd-kit

Un toolkit moderno y ligero de arrastrar y soltar para la web, con un núcleo independiente del framework y adaptadores para React, Vue, Svelte y SolidJS.

Ver en GitHubSitio web
Estrellas
17,738
Forks
927
Issues abiertos
134
Último commit
hace 7 días

¿Qué es?

dnd-kit es un toolkit de arrastrar y soltar para crear interfaces interactivas en la web. Se divide en varias capas: un núcleo independiente del framework (@dnd-kit/abstract), una implementación para DOM (@dnd-kit/dom) y adaptadores ligeros para React, Vue, Svelte y SolidJS, además de una opción de JavaScript puro.

El toolkit permite trabajar con listas, cuadrículas, varios contenedores, contextos anidados, elementos de distintos tamaños y listas virtualizadas. Incluye sensores de puntero, mouse, pantalla táctil y teclado, y permite reemplazar los sensores, los algoritmos de detección de colisiones y las asignaciones de teclas. Sobre el núcleo se construye una capa para ordenar elementos (@dnd-kit/dom/sortable), pensada para las listas que suelen reorganizarse.

La accesibilidad se aborda mediante compatibilidad con el teclado, atributos ARIA predeterminados, instrucciones personalizables para lectores de pantalla y regiones dinámicas. El proyecto está escrito en TypeScript y se publica bajo la licencia MIT.

Funciones clave

  • 01Núcleo independiente del framework, con adaptadores para React, Vue, Svelte y SolidJS
  • 02Sensores de puntero, mouse, pantalla táctil y teclado integrados
  • 03Compatible con listas, cuadrículas, varios contenedores y listas virtualizadas
  • 04Sensores, detección de colisiones y asignaciones de teclas personalizables
  • 05Capa para ordenar elementos basada en el núcleo, para listas que se pueden reorganizar
  • 06Compatibilidad con el teclado y atributos ARIA predeterminados para la accesibilidad

Casos de uso

  • Crear listas ordenables o tableros estilo kanban en una aplicación de React o Vue
  • Crear cuadrículas o diseños de arrastrar y soltar con varios contenedores
  • Añadir la opción de reorganizar elementos mediante pantalla táctil y teclado a una interfaz web

Inicio rápido

  1. 1

    Elige tu framework y sigue la guía de inicio rápido en dndkit.com

  2. 2

    Instala las dependencias del monorepo con bun

    bun install
  3. 3

    Inicia el modo de desarrollo

    bun run dev

Temas

#drag-and-drop#react#vue#svelte#typescript#accessibility#sortable#ui-components#drag#draggable

Preguntas frecuentes

¿Qué es dnd-kit?
Un toolkit moderno y ligero de arrastrar y soltar para la web, con un núcleo independiente del framework y adaptadores para React, Vue, Svelte y SolidJS. dnd-kit es un toolkit de arrastrar y soltar para crear interfaces interactivas en la web. Se divide en varias capas: un núcleo independiente del framework (@dnd-kit/abstract), una implementación para DOM (@dnd-kit/dom) y adaptadores ligeros para React, Vue, Svelte y SolidJS, además de una opción de JavaScript puro.
¿dnd-kit es gratuito? ¿Qué licencia tiene?
dnd-kit es open source bajo la licencia MIT. Revisa los términos de la licencia antes de usarlo en productos comerciales.
¿dnd-kit sigue mantenido?
Mantenimiento activo. El último commit de dnd-kit fue el 15 oct 2026.
¿Para qué puedo usar dnd-kit?
Crear listas ordenables o tableros estilo kanban en una aplicación de React o Vue Crear cuadrículas o diseños de arrastrar y soltar con varios contenedores Añadir la opción de reorganizar elementos mediante pantalla táctil y teclado a una interfaz web
¿Cómo se instala dnd-kit?
Elige tu framework y sigue la guía de inicio rápido en dndkit.com Instala las dependencias del monorepo con bun: bun install Inicia el modo de desarrollo: bun run dev
¿Dónde consigo dnd-kit?
El código fuente y las instrucciones de instalación están en GitHub: https://github.com/clauderic/dnd-kit

Resumen generado por IA a partir del README del proyecto. Las estadísticas de GitHub se actualizan a diario.

Proyectos relacionados