🖖 Inicio

SERVICIOS

Salir

nochedía

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

400 palabras
2 minutos
January 8, 2020
blogjavascript

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 aquí, 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 aquí 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 aquí 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 aquí 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 aquí, es exageradamente rápida y sin duda muy recomendable, y como muchas de las anteriores, sirve para todo

muuri

Otra delicia es 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, esta librería 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 aquí para ver otro user-case para eventos de tipo drag-n-drop, simplemente espectacular

draggable

Y de la genter de Shopify tenemos 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)

Qué tal la entrada?
👌 Bien 🙌🙌
👍 Bien, pero algunas cosas podrían explicarse mejor 😬
🤷‍♂️ Da por sentadas demasiadas cosas 😒
🤷‍♂️ A ver, hay poca chicha 😬
🤷‍♂️ Los ejemplos no son muy claros 🙇‍♂️
🤷‍♂️ No se entiende, está mal escrito 👎
✍️ Hay errores, revísalo en cuanto puedas 🙏

Newsletter de kuworking, un correo de tanto en cuanto

Quizá te interese

Privacidad
by kuworking.com
[ 2020 >> kuworking ]