DndContext, useDraggable et useDroppable

Chaque fonctionnalité de glisser-déposer dans dnd-kit doit être enveloppée dans un composant DndContext. DndContext est le centre de coordination : il suit les glissements actifs, communique entre les éléments déplaçables et les zones de dépôt et déclenche les fonctions de rappel des événements. Vous le placez généralement au niveau du composant qui gère l'état du glissement.

Le hook useDraggable({ id }) rend un composant déplaçable. Il renvoie quatre valeurs clés : attributs (propriétés ARIA à appliquer à l'élément), écouteurs (gestionnaires d'événements qui déclenchent le glissement), setNodeRef (associe la référence de l'élément déplaçable) et translation (translation actuelle sous la forme de {x, y, scaleX, scaleY}).

Pour configurer un élément déplaçable, appliquez attributes et listeners à l'élément, puis transmettez setNodeRef comme propriété ref. Les attributs incluent role="button", tabIndex et les propriétés aria. Les écouteurs associent les gestionnaires d'événements de pointeur et de clavier dont dnd-kit a besoin pour détecter le début du glissement.

La valeur transform renvoyée par useDraggable vaut null lorsqu'aucun glissement n'est en cours et devient un objet de coordonnées pendant le glissement. Vous la convertissez en chaîne CSS avec CSS.Translate.toString(transform) du paquet @dnd-kit/utilities. Appliquez cette valeur comme propriété CSS transform à l'élément déplaçable afin qu'il suive visuellement le curseur.

Le hook useDroppable({ id }) marque un conteneur comme cible de dépôt valide. Il renvoie isOver (un booléen vrai lorsqu'un élément déplaçable survole cette zone de dépôt) et setNodeRef pour associer la référence à l'élément de dépôt. Contrairement à useDraggable, aucun écouteur d'événement n'est à appliquer.

La valeur isOver de useDroppable vous permet de fournir un retour visuel pendant un glissement. Lorsque isOver est vrai, vous pouvez appliquer une couleur de mise en évidence, une bordure ou une modification de l'arrière-plan à la zone de dépôt. Cela aide les utilisateurs à comprendre où ils peuvent déposer l'élément, ce qui est essentiel pour l'ergonomie et l'accessibilité.

La fonction de rappel onDragEnd de DndContext reçoit un objet événement comportant deux propriétés importantes : event.active contient l'élément déplacé, notamment son id, et event.over contient la cible de dépôt, ou null si l'élément est déposé en dehors de toute zone de dépôt. Vous utilisez ces ID pour mettre à jour l'état de votre application.

Dans onDragEnd, après avoir vérifié que event.over n’est pas nul, vous mettez à jour votre état pour refléter le déplacement. Par exemple, si vous déplacez une carte entre des colonnes d’un tableau Kanban, vous retirez la carte de la colonne source et vous l’ajoutez à la colonne cible identifiée par event.over.id.

DragOverlay affiche un aperçu flottant de l’élément déplacé qui suit le curseur. Il s’affiche dans un portail (en dehors de l’arborescence DOM normale), de sorte qu’il n’est jamais tronqué par des conteneurs dont le débordement est masqué. Contrairement à l’élément d’origine, la superposition peut avoir des ombres portées, des transformations d’échelle ou une rotation pour indiquer qu’elle est en cours de déplacement.

Pour afficher le contenu correct dans DragOverlay, suivez l’élément actuellement déplacé à l’aide de la fonction de rappel onDragStart. Stockez l’ID actif dans l’état : setActiveDragId(event.active.id). Dans onDragEnd, réinitialisez-le à null. À l’intérieur de DragOverlay, utilisez activeDragId pour rechercher l’élément correct et l’afficher.

Une véritable interface de glisser-déposer combine DndContext, plusieurs éléments useDraggable, plusieurs zones useDroppable et une gestion de l’état pour suivre la position de chaque élément. L’idée essentielle est que dnd-kit fournit les mécanismes : c’est à vous de mettre à jour l’état dans onDragEnd et de réafficher l’interface pour refléter la nouvelle disposition.

Quel utilitaire convertit l’objet transform de useDraggable en chaîne de transformation CSS ?

DndContext est le centre de coordination de toutes les opérations de glisser-déposer de dnd-kit. useDraggable fournit les attributs, les écouteurs, setNodeRef et transform pour les éléments déplaçables. useDroppable fournit isOver et setNodeRef pour les cibles de dépôt. onDragEnd vous donne event.active.id et event.over?.id pour mettre à jour l’état. DragOverlay affiche un aperçu flottant basé sur un portail.