Recentment, ens vam trobar amb un repte en el desenvolupament d'interfícies interactives: la necessitat de crear blocs mòbils que funcionessin com a menús dinàmics, permetent l'arrossegament de botons en qualsevol direcció i organitzant-los en fila.
Després d'investigar diverses biblioteques, vam identificar que DnD Kit oferia la millor solució. La seva documentació detallada i exemples pràctics van permetre aprofitar al màxim les seves funcionalitats clau, com useDraggable per moure elements i useDroppable per gestionar la seva inserció en àrees específiques. A més, la personalització d'animacions i la disposició en files van ser factors decisius per a la seva elecció.
Per a la implementació, vam començar instal·lant les llibreries necessàries i configurant sensors en el context de l'aplicació, permetent la detecció de gestos tant de ratolí com de pantalles tàctils. Vam optar per utilitzar collisionDetection=pointerWithin per optimitzar la interacció en funció de la posició del punter i els objectes adjacents.
El component principal, DndRoot, gestiona l'estat del bloc actiu en iniciar l'arrossegament (handleDragStart), i el restableix en finalitzar-lo (handleDragEnd). A més, l'esdeveniment handleDragOver detecta si el bloc està sobre una àrea d'inserció vàlida.
L'organització dels botons es va realitzar mitjançant un estat que els emmagatzema amb propietats com ordre i número de fila, facilitant el seu emmagatzematge en bases de dades. Per a cada fila, vam implementar el component DndRow, on s'aplica SortableContext per a la reorganització horitzontal.
Al nostre sistema, les posicions dels botons canviaven visualment en ser arrossegats, però no s'actualitzaven a l'estat fins que l'usuari alliberés el botó. Per això, vam desenvolupar funcions específiques per recalcular tant l'ordre dels elements dins d'una fila com el número de fila en moure diversos botons entre files.
Finalment, vam optimitzar l'experiència de l'usuari afegint animacions per suavitzar les transicions en moure els botons. Per aconseguir-ho, vam utilitzar la funcionalitat de DragOverlay de DnD Kit, que permet representar un clon del botó mentre s'arrossega, aconseguint una animació fluida.
A Q2BSTUDIO, empresa líder en desenvolupament i serveis tecnològics, apliquem aquest tipus de solucions innovadores per millorar la usabilitat de les nostres aplicacions. Ens especialitzem a oferir experiències interactives eficients i personalitzables, adaptant-nos a les necessitats de cada projecte. Si busques optimitzar la teva plataforma amb funcionalitat avançada de drag and drop, el nostre equip pot ajudar-te a implementar solucions intuïtives i escalables.
Aquest desenvolupament demostra com, amb les eines adequades i una arquitectura ben planificada, és possible millorar significativament la interacció de l'usuari en interfícies digitals.
