¡Bienvenido al repositorio de Ejemplos de Pragmatic Drag & Drop!
El objetivo de este proyecto, es el de mejorar la guía de ejemplos de Pragmatic Drag & Drop y que te permita aprender a manejarte con este librería de una forma más sencilla y rápida.
- 🇬🇧: Guia en ingles
Pragmatic Drag & Drop de Atlassian es una librería potente para incorporar funcionalidad de arrastrar y soltar en tu aplicacione web. En su sección de tutoriales, Atlassian proporciona ejemplos interesantes utilizando un tablero de ajedrez para explicar los conceptos básicos de arrastrar y soltar.
Sin embargo, estos ejemplos tienen algunas desventajas:
- 📄 El código es un poco difícil de seguir porque todo está en un solo archivo.
- 💄 Los ejemplos usan la librería Emotion para CSS, lo que puede ser una distracción debido a que se mete ruido con dependencias adicionales.
- 🛠️ Si descargas el código desde CodeSandbox para ejecutarlo localmente, puedes encontrar problemas durante la instalación y ejecución debido a conflictos de versiones.
Para eliminar estos problemas, hemos:
- 🧹 Simplificado el ejemplo eliminando dependencias innecesarias, como Emotion, y usando CSS simple en su lugar.
- 📂 Organizado el proyecto en carpetas y archivos para hacer el código más modular y fácil de entender.
- 📚 Creado guías paso a paso en formato markdown para cada ejemplo, permitiéndote reproducir los ejemplos fácilmente.
- 🆕 Añadido nuevos ejemplos como un tablero de Kanban simple para que puedas ver cómo aplicar la librería sin distraerte en detalles de implementación.
- 🇪🇸 Traducido las guías al español para que puedas seguir los ejemplos en tu idioma nativo.
Esperamos que estas mejoras te hagan más fácil seguir el tutorial y pues aprender mejor cómo funciona esta fantástica librería.
Este ejemplo parte de su tutorial original. ¿Cuáles son las diferencias con respecto al original?
-
Se ha eliminado la dependencia de Emotion y se ha utilizado CSS simple.
-
El código se ha organizado en carpetas y archivos para hacerlo más modular y fácil de entender.
-
Se ha creado una guía paso a paso en formato markdown para que puedas reproducir el ejemplo fácilmente.
-
La guía también está traducida al español para que puedas seguir el ejemplo en tu idioma nativo.
Este ejemplo muestra como implementar un tablero Kanban Simple, el objetivo de esta base de código es que te centres en lo que ofrece la librería sin distraerte en detalles (si buscas una solución más refinada, puedes consultar la Demo que ofrece Pragmatic Drag And Drop).
Qué se ha implementado:
-
Un punto de partida (se muestran columnas y tarjetas).
-
Cómo hacer drag de las cartas.
-
Cómo hacer drop en las columnas (y por qué no es buena del todo la solución).
-
Cómo hacer drop en las cards.
-
Cómo mostrar una card fantasma mientras se hace drag, para indicar donde se va a soltar la card.
Este kanban es
Work in Progressahora mismo hay cinco pasos implementados, en el futuro iremos añadiendo más mejoras.
- Añadir más ejemplos ampliando el tutorial actual.
Para comenzar con los ejemplos, clona este repositorio y sigue las instrucciones proporcionadas en las respectivas guías markdown.
Clona el repositorio
git clone https://github.com/Lemoncode/pragmatic-drag-and-drop-tutorial-typescript.gitAhora, por ejemplo, abre el ejemplo 00-starter-code
cd 00-starter-codeInstala las dependencias
npm installEjecuta el proyecto
npm run devAhora puedes abrir tu navegador y dirigirte a http://localhost:5173 para ver el proyecto.
Y comienza a construir el siguiente paso siguiendo la guía ubicada en:
Sigue las guías paso a paso en el directorio de guías para cada ejemplo.
¡Las contribuciones son bienvenidas! Si tienes alguna mejora o nuevos ejemplos para agregar, no dudes en abrir una pull request.
Este proyecto está licenciado bajo la Licencia MIT. Consulta el archivo LICENSE para más detalles.
Esperamos que estos ejemplos y guías te sean útiles y puedes poner al día con esta librería tan buena.
¡ A por ello ! :)