Dans ce tutoriel je vous propose de découvrir comment créer un système de réorganisation en drag'n drop.
Le problème
Pour ce système de réorganisation on souhaite mettre en place une réorganisation animée. Pour cette animation on va devoir positionner les éléments de manière absolue mais nous allons utiliser les transformation pour gérer les déplacements car cela offre de meilleur performances (cf csstriggers).
Pour placer nos éléments convenablement et gérer le positionnement nous allons utiliser une grille. A partir de la taille du premier élément on va être capable de placer n'importe quel élément à partir de sa position. De la même façon lors d'un déplacement, il sera facile de "deviner" la position de l'élément à partir de ses coordonnées.
Interact.js
Pour la partie drag'n drop nous allons utiliser la librairie interact.js. Cette librairie nous permet de gérer simplement les interactions à la fois sur bureau et sur mobile.
