Aperçus personnalisés du glisser-déposer et DnD multi-conteneurs

DragOverlay affiche son contenu comme un portail React, en l’ajoutant directement à document.body plutôt qu’à l’intérieur de l’arborescence DOM de DndContext. Ainsi, il n’est jamais tronqué par des conteneurs dont le débordement est masqué ou défilable, et il apparaît toujours au-dessus des autres éléments sans nécessiter de gestion manuelle de z-index.

Comme DragOverlay est séparée de l’élément d’origine, elle peut avoir des styles visuels qui perturberaient la disposition s’ils étaient appliqués à l’élément d’origine. Vous pouvez ajouter une ombre portée, une transformation d’échelle (pour la rendre légèrement plus grande que l’original) ou un effet de rotation. Ces repères visuels indiquent à l’utilisateur que l’élément est « soulevé » et en mouvement.

DragOverlay doit savoir quoi afficher. Suivez l’ID du déplacement actif dans l’état : définissez-le dans onDragStart avec event.active.id et effacez-le dans onDragEnd avec null. À l’intérieur de DragOverlay, utilisez cet ID pour trouver les données de l’élément correspondant et afficher le composant d’aperçu correct.

Lorsque vous utilisez DragOverlay, l’élément déplaçable d’origine doit devenir un espace réservé visuel pendant le déplacement. Avec useSortable, appliquez opacity: 0 ou une bordure en pointillés lorsque isDragging vaut true. Cela montre l’« emplacement » où l’élément reviendra si le déplacement est annulé, ainsi que l’espace qu’il laisse en se déplaçant vers une nouvelle position.

Le glisser-déposer entre plusieurs conteneurs permet de déplacer des éléments entre au moins deux listes distinctes. La configuration exige un seul DndContext enveloppant tous les conteneurs, chacun possédant son propre SortableContext. Tous les ID des éléments de tous les conteneurs doivent être uniques à l’échelle globale afin d’éviter les collisions.

Pour obtenir une animation fluide entre les conteneurs, mettez à jour l’état dans onDragOver plutôt que d’attendre onDragEnd. Lorsque l’élément déplacé entre dans un nouveau conteneur, déplacez-le immédiatement du conteneur source vers le conteneur cible. L’utilisateur bénéficie ainsi d’un retour visuel en temps réel sur l’endroit où l’élément sera déposé.

Lorsque vous déplacez des éléments entre plusieurs instances de SortableContext, tous les ID des éléments doivent être uniques dans l’ensemble du DndContext, et pas seulement dans chaque liste. Si deux conteneurs partagent un ID, dnd-kit ne peut pas déterminer quel élément est actif. Utilisez des UUID ou préfixez les ID avec le nom du conteneur afin de garantir leur unicité globale.

useDraggable et useSortable acceptent une option data : useSortable({ id, data: { containerId, type } }). Ces données sont disponibles dans les fonctions de rappel des événements de déplacement sous la forme event.active.data.current. Dans les scénarios à plusieurs conteneurs, vous pouvez stocker l’ID du conteneur source dans data et l’utiliser dans onDragOver pour savoir d’où vient l’élément.

L’état entre plusieurs conteneurs utilise généralement un objet indexé par l’ID du conteneur, chaque entrée contenant un tableau d’éléments. Dans onDragOver, lorsque l’élément actif se trouve dans un conteneur différent de celui de la cible survolée, retirez l’élément du tableau du conteneur source et insérez-le dans celui du conteneur cible à la position correcte.

KeyboardSensor fonctionne pour le glisser-déposer entre plusieurs conteneurs. Les utilisateurs appuient sur les touches fléchées pour se déplacer entre les éléments d’un conteneur et, lorsqu’ils atteignent le bord d’un conteneur, ils peuvent continuer vers les conteneurs adjacents. L’algorithme collisionDetection de SortableContext détermine la cible de dépôt valide la plus proche en fonction de la position.

DndContext accepte une propriété collisionDetection qui détermine la manière dont il calcule la zone de dépôt survolée par l’élément déplacé. La valeur par défaut closestCenter convient à la plupart des listes. closestCorners est préférable pour les grilles. pointerWithin n’active une zone de dépôt que lorsque le curseur se trouve physiquement à l’intérieur.

DragOverlay s’affiche comme un portail vers document.body, ce qui lui confère une indépendance visuelle par rapport aux contraintes de disposition. Suivez activeDragId dans onDragStart/onDragEnd pour afficher le contenu correct de la superposition. Le glisser-déposer entre plusieurs conteneurs utilise plusieurs instances de SortableContext à l’intérieur d’un seul DndContext, avec des ID uniques à l’échelle globale. Mettez à jour l’état dans onDragOver pour obtenir des animations fluides entre les conteneurs, en utilisant event.active.data.current pour les métadonnées du conteneur source.