SortableContext pour les listes réordonnables

SortableContext est un composant spécialisé de dnd-kit qui enveloppe une liste réorganisable. Alors que useDraggable et useDroppable gèrent le glisser-déposer général, SortableContext prend spécifiquement en charge le cas où les éléments d’une liste doivent être réorganisés en les faisant glisser vers une nouvelle position.

SortableContext exige une propriété items : un tableau d’ID uniques, sous forme de chaînes ou de nombres, qui correspondent aux ID utilisés dans les composants réorganisables enfants. L’ordre de ce tableau définit l’ordre actuel des éléments. Lorsque vous mettez à jour ce tableau dans l’état, la liste s’affiche de nouveau dans le nouvel ordre.

SortableContext accepte une propriété strategy qui contrôle la manière dont les éléments sont triés. verticalListSortingStrategy est destinée aux listes verticales et calcule le point d’insertion en fonction de la position verticale. horizontalListSortingStrategy est destinée aux listes horizontales. rectSortingStrategy est destinée aux grilles. Choisissez la stratégie qui correspond à votre disposition.

À l’intérieur de SortableContext, chaque élément de la liste utilise la fonction useSortable({ id }) au lieu de useDraggable. useSortable est un surensemble de useDraggable : elle renvoie les mêmes attributs, écouteurs, setNodeRef et transform, ainsi que des valeurs supplémentaires propres au tri, comme isDragging et overIndex.

La valeur isDragging fournie par useSortable vaut true tant que l’élément est activement déplacé. Vous l’utilisez généralement pour réduire l’opacité de l’élément d’origine dans la liste ou lui appliquer un style d’espace réservé pendant son déplacement. Cet espace visuel indique à l’utilisateur où l’élément se trouve actuellement dans la liste.

dnd-kit exporte un utilitaire arrayMove(array, fromIndex, toIndex) depuis @dnd-kit/sortable. Il renvoie un nouveau tableau dans lequel l’élément situé à fromIndex est déplacé vers toIndex. C’est la méthode standard pour mettre à jour votre tableau d’état lorsqu’un déplacement de tri est terminé.

Dans la fonction de rappel onDragEnd de DndContext pour une liste réorganisable, vous trouvez les anciens et nouveaux indices à l’aide de items.indexOf(event.active.id) et items.indexOf(event.over?.id). Si les deux indices sont valides et différents, vous appelez setItems(arrayMove(items, oldIndex, newIndex)) pour réorganiser le tableau.

Lorsqu’un élément est déplacé, les autres éléments de la liste s’animent vers de nouvelles positions pour montrer où l’élément déplacé va se placer. useSortable fournit une transformation CSS pour chaque élément qui n’est pas déplacé afin de le décaler. L’ajout d’une transition CSS à cette transformation crée une animation de mouvement fluide.

Appliquez une transition CSS à la propriété transform des éléments réorganisables : transition: isDragging ? undefined : transform ? 'transform 200ms ease' : undefined. Lorsqu’un élément est déplacé, aucune transition n’est nécessaire : il doit suivre directement le curseur. Lorsqu’il est décalé, une transition crée une animation de glissement fluide.

Pour une expérience utilisateur optimale, combinez SortableContext avec DragOverlay. L’élément déplacé dans la liste devient un espace réservé semi-transparent (à l’aide de isDragging), tandis que DragOverlay affiche une copie opaque et surélevée qui suit le curseur. Cette approche évite les défauts visuels où l’élément déplacé saute d’une position à une autre.

SortableContext fonctionne aussi bien pour les listes verticales (tableaux de tâches, listes de tâches) que pour les listes horizontales (barres d’onglets, carrousels d’images). Passez d’une stratégie à l’autre en modifiant la propriété strategy. Vous pouvez même l’utiliser pour une disposition en grille avec rectSortingStrategy, qui calcule la cellule de grille la plus proche en fonction de la position du déplacement.

Quels arguments arrayMove reçoit-elle lorsqu’elle est appelée dans onDragEnd pour réorganiser une liste réorganisable ?

SortableContext enveloppe une liste réorganisable et exige un tableau items d’ID uniques ainsi qu’une stratégie (verticale, horizontale ou en grille). Chaque élément utilise useSortable au lieu de useDraggable et bénéficie ainsi de isDragging et overIndex. Dans onDragEnd, arrayMove(items, oldIndex, newIndex) réorganise le tableau. Les transitions CSS appliquées à transform animent les éléments décalés en douceur.