Drag & Drop con HTMX + Flask + MySQL

Una implementación minimalista de drag and drop para ordenar elementos usando HTMX, Flask y MySQL. Sin JavaScript complejo, sin frameworks pesados.

¿Qué hace?

Ordena números (menor a mayor/mayor a menor) y letras (alfabéticamente) arrastrando elementos. La magia está en que HTMX maneja todo el intercambio con el servidor sin escribir una línea de JS.

Stack

• Backend: Flask + MySQL (mysql-connector-python)
• Frontend: HTMX + TailwindCSS + Sortable.js
• Base de datos: 2 tablas simples (items y letras)

💡 Conceptos clave

• hx-trigger="end": Dispara cuando termina el drag
• hx-swap="outerHTML": Reemplaza todo el contenedor
• Componentes reutilizables: Misma lógica para números y letras
• Validación server-side: Python decide si el orden es correcto