Faire du drag and drop avec Reactjs n’est pas nécessairement une tâche simple, mais avec certaines bibliothèques, cela peut être largement simplifié. Voici un guide simple utilise la bibliothèque “react-dnd” :
Prérequis :
Installez d’abord la bibliothèque avec npm ou yarn :
```
npm install react-dnd react-dnd-html5-backend
Exploration progressive de l’implémentation du glisser-déposer :
1. Importez les hooks nécessaires de react-dnd dans vos fichiers.
```
import { useDrag, useDrop } from “react-dnd”;
```
1. Créez une constante pour votre type d’élément glissable.
```
const type = “item”;
```
1. Ajoutez la logique du glisser-déplacer (`drag`) à l’élément que vous voulez pouvoir déplacer.
Les “dragSourceMonitor” et “dropTargetMonitor” vous permettent de surveiller l’état du glisser-déposer, comme savoir si l’élément est actuellement glissé.
```
const [{ isDragging }, drag] = useDrag(() => ({
type,
item: { id },
collect: (monitor) => ({
isDragging: monitor.isDragging(),
}),
}));
```
1. Ajoutez la logique de dépôt (`drop`) à l’élément où vous voulez pouvoir déposer.
```
const [, drop] = useDrop(() => ({
accept: type,
drop: (item) => moveItem(item.id, id),
}));
```
1. Ajoutez les références `drag` et `drop` à l’élément.
```
Voici un exemple de composant complet :
```
import React from “react”;
import { useDrag, useDrop } from “react-dnd”;
const type = “item”;
const Item = ({ id, children, moveItem }) => { const [{ isDragging }, drag] = useDrag(() => ({ type, item: { id }, collect: (monitor) => ({ isDragging: monitor.isDragging(), }), }));
const [, drop] = useDrop(() => ({ accept: type, drop: (item) => moveItem(item.id, id), })); const opacity = isDragging ? 0 : 1; return (export default Item;
```
Dans cet exemple, moveItem est une fonction qui met à jour l’état de la liste d’éléments pour refléter le déplacement de l’item.
