hand Inicio
hand JSBloqs
hand GutenBloqs

Buscas una librería para implementar Drag and Drop? Te hablo de 9 posibilidades

Aunque es relativamente sencillo implementar drag-n-drop con vainilla JavaScript, existen librerías tan potentes y consolidadas que vale la pena no reinventar la rueda

DRAG-n-DROP

El drag-n-drop es algo que puede que queramos utilizar algún día, o puede que no

Es como todo

Y lo cierto es que sin una necesidad concreta no es un elemento que acostumbre a estar presente en las webs

Eso sí, la posibilidad de mover ítems de una lista a otra es potentísima, y puedo pensar en muchas aplicaciones que sí lo usarían

Y un website es una aplicación, claro

Pero una aplicación no tiene porque ser un website

Y un website tampoco tiene porque ser una aplicación, puede limitarse a compartir contenido sin ninguna otra funcionalidad

Lo que sea, pero este post no va de esto

Va de repasar 9 opciones que nos facilitarán la vida si queremos implementar esta funcionalidad

Opción primera, la que he escogido yo

react-beautiful-dnd

La encuentras en https://github.com/atlassian/react-beautiful-dnd, de Atlassian (los que compraron Trello), y que ya te dicen que sirve para lo que sirve, esto es, listas verticales o horizontales

Y estos no son todos los usos que puedes darle, pero si es el caso, esta librería es fácil y terriblemente potente

Para utilizarla? Tienes un curso en kuworking aquí, dentro de un entorno Gatsby

react-dnd

La gran librería drag-n-drop de JavaScript, la encuentras en https://github.com/react-dnd/react-dnd y representa un nivel de abstracción mayor que la anterior

Es decir, va bien para todo, pero es más complicada de ponerla a punto, y con la documentación un poco más tosca en general

interact

La tienes en https://github.com/taye/interact.js y es espectacular, aunque parece que esto de las listas le viene pequeño porque viendo los ejemplos esto nos serviría para hacer incluso juegos

draggabilly

Otra opción que encuentras en https://github.com/desandro/draggabilly y que te permite más o menos lo mismo pero más sencillo (y con menos opciones, claro)

sortable

Otro de los pesos pesados, la ves en https://github.com/SortableJS/Sortable, es exageradamente rápida y sin duda muy recomendable, y como muchas de las anteriores, sirve para todo

muuri

Otra delicia es https://github.com/haltu/muuri, con una demo para ordenar elementos en una grid que resulta espectacular

Razones para escoger una u otra? La verdad, difícil elección

react-diagrams

Relacionada con el drag-n-drop, pero para diagramas, https://github.com/projectstorm/react-diagrams es tremenda, imagínate tener que desarrollar una funcionalidad como esta desde el principio, increible

selection

Pensabas que lo habías visto todo? Pásate por https://github.com/Simonwep/selection para ver otro user-case para eventos de tipo drag-n-drop, simplemente espectacular

draggable

Y de la genter de Shopify tenemos https://github.com/Shopify/draggable, aunque como ya indican en la página no está mantenida y se buscan nuevos responsables, por lo que teniendo en cuenta las alternativas de arriba ... nada recomendable (por el momento)

draw of me

Hola, tienes en mente desarrollar una web?

Si quieres, te ayudo

11ty para webs ultra-rápidaseleventy js
Gatsby para webs complejasgatsby js
WordPress para webs para el usuario finalwordpress

Escríbeme

Lista de correo: escribo algo de tanto en cuanto