Drag and drop React : liste triable et tableau kanban
Guide du drag and drop en React
Drag and drop React : liste triable et kanban (dnd-kit) | We.Inc
Créez une liste triable et un tableau kanban en React avec dnd-kit, ou avec les événements de glisser-déposer HTML natifs. Tableau en direct sur la page, déplacements au clavier inclus, code à copier.
Pour la plupart des applications React, dnd-kit est le choix solide le plus simple : une boîte à outils sous licence MIT avec des capteurs pointeur, tactile et clavier intégrés. Installez @dnd-kit/react, enveloppez la zone dans DragDropProvider, donnez à chaque carte useSortable avec un id, un index et un group, puis mettez à jour votre state dans onDragEnd. Les événements de glisser-déposer HTML natifs fonctionnent aussi, avec davantage de code écrit à la main.
Deux façons d'ajouter le glisser-déposer
dnd-kit (@dnd-kit/react)
Drag and drop HTML natif
Installation
npm install @dnd-kit/react
Rien, intégré aux navigateurs
Clavier
Capteur clavier inclus
Vous créez vos propres contrôles au clavier
Tactile
Capteurs tactile et pointeur inclus
Variable selon le navigateur ; testez sur téléphone
Listes triables
useSortable depuis @dnd-kit/react/sortable
Vos propres calculs d'index dans les gestionnaires de drop
Idéal pour
Tableaux kanban, listes triables, grilles
Déposer des fichiers ou des dépôts simples et ponctuels
Ci-dessous se trouve un tableau fonctionnel sur lequel vous pouvez déplacer des cartes dès maintenant, avec des boutons fléchés pour qui n'utilise pas de souris. En dessous, vous trouverez le code dnd-kit pour la même liste triable et le tableau à plusieurs colonnes, ainsi que la version avec les événements natifs du navigateur pour comparer.
Faites glisser une carte dans sa colonne pour la réordonner, ou vers une autre colonne pour la déplacer.
Pas de souris ? Atteignez une carte avec Tab et utilisez ses boutons de déplacement pour changer de position ou de colonne.
Copiez d'abord la liste triable dnd-kit, puis la version kanban qui ajoute un group par colonne.
Gardez les données du tableau dans un state simple indexé par colonne, et laissez onDragEnd produire la copie suivante.
Donnez à chaque élément déplaçable un id stable issu de vos données. Les index de tableau utilisés comme id cassent dès que les éléments bougent.
Sortez immédiatement quand event.canceled vaut true, pour qu'appuyer sur Échap en plein glissement laisse le tableau intact.
Enregistrez le nouvel ordre côté backend après le dépôt, et revenez en arrière si la requête échoue.
Laissez un espace ou un contour visible là où la carte va atterrir ; les gens doivent voir la cible avant de relâcher.
Les colonnes vides ont quand même besoin d'une zone de dépôt avec une certaine hauteur, sinon rien ne pourra jamais y être déposé.
Questions fréquentes
react-beautiful-dnd est-il toujours un bon choix ?
Atlassian a archivé le dépôt react-beautiful-dnd et recommande son successeur, Pragmatic drag and drop. Pour un nouveau projet React, dnd-kit et Pragmatic drag and drop sont les options activement maintenues à comparer.
Quelle est la différence entre @dnd-kit/core et @dnd-kit/react ?
@dnd-kit/core avec @dnd-kit/sortable est le duo de paquets React historique. @dnd-kit/react est l'adaptateur plus récent, construit sur un cœur indépendant du framework qui alimente aussi les adaptateurs Vue, Svelte et Solid. Un nouveau code peut partir de @dnd-kit/react, comme le fait la documentation actuelle.
Pourquoi mon événement drop ne se déclenche-t-il jamais avec l'API HTML ?
Une cible de dépôt doit appeler event.preventDefault() dans son gestionnaire dragover. Sans cet appel, le navigateur considère l'élément comme une cible invalide et l'événement drop n'est jamais envoyé.
Comment rendre le glisser-déposer accessible ?
Rendez chaque carte focalisable, proposez un moyen au clavier de la saisir, la déplacer et la déposer, et annoncez le résultat dans une live region. dnd-kit fournit d'emblée un capteur clavier et un support de l'accessibilité ; avec l'API native, vous ajoutez tout cela vous-même.
D'abord le state, ensuite le glissement
Un tableau est un objet de tableaux : un tableau d'id de cartes par colonne. Le glissement ne fait que déterminer quelle carte a bougé, d'où elle venait et où elle a atterri. Chaque bibliothèque vous fournit ces quatre informations, et votre code les transforme en un nouvel objet.
Écrivez cette fonction de déplacement comme une fonction pure et testez-la sans navigateur. dnd-kit en fournit même une, move depuis @dnd-kit/helpers, qui prend vos éléments et l'événement de glissement et renvoie la copie mise à jour.
Pourquoi l'API native est plus difficile qu'il n'y paraît
Le navigateur déclenche sept événements (dragstart, drag, dragenter, dragleave, dragover, drop et dragend) et vous devez annuler dragover sur chaque cible valide. Les données transitent par event.dataTransfer sous forme de chaînes, et vous ne pouvez les lire que dans le gestionnaire drop.
Il n'y a ni parcours au clavier ni moyen intégré d'animer les autres cartes pour libérer la place. Cela convient pour déposer un fichier dans une zone d'upload, mais un tableau triable devient vite une petite bibliothèque à lui seul.
Liste triable avec dnd-kit
Installez avec npm install @dnd-kit/react. Chaque élément connaît son propre index ; après un dépôt, source.initialIndex et source.index vous indiquent où il a été déplacé.
SortableList.jsx
Réordonne un tableau de noms de tâches. Le principe copier puis splice laisse l'ancien state intact.
Tableau kanban avec dnd-kit
Ajoutez un group à useSortable pour que les cartes puissent passer d'une colonne à l'autre. source.initialGroup et source.group sont l'ancien et le nouveau nom de colonne.
KanbanBoard.jsx
Trois colonnes stockées dans un seul objet. Un déplacement dans une colonne la réordonne ; un déplacement vers une autre retire la carte d'un tableau et l'insère dans l'autre.
La même idée avec les événements HTML natifs
Aucun paquet nécessaire. Notez le preventDefault dans onDragOver : sans lui, le drop ne se déclenche jamais.
NativeColumns.jsx
Déplace une carte à la fin de la colonne sur laquelle elle est déposée. Réordonner à l'intérieur d'une colonne demanderait une logique d'index supplémentaire.
Référence des événements de glissement HTML
Les sept événements de glissement et où ils se déclenchent
Événement
Se déclenche sur
Quand
L'élément déplacé
Le glissement commence ; définissez dataTransfer ici
L'élément déplacé
En continu pendant le glissement
Une cible possible
L'élément déplacé y entre
Une cible possible
En continu pendant le survol ; appelez preventDefault pour autoriser un dépôt
Une cible possible
L'élément déplacé en sort
La cible
L'élément est relâché sur une cible valide ; lisez dataTransfer ici
L'élément déplacé
Le glissement se termine, déposé ou annulé
À faire
En cours
Terminé
Logo
Grille tarifaire
Formulaire de contact
Section hero
Domaine
{card} déplacée vers {column}, position {n}
Essayez : un tableau kanban fonctionnel
Faites glisser les cartes entre À faire, En cours et Terminé, ou utilisez les boutons de déplacement de chaque carte.