Des lecteurs comme vous aident à soutenir MUO. Lorsque vous effectuez un achat en utilisant des liens sur notre site, nous pouvons gagner une commission d'affiliation.
Avez-vous déjà voulu ajouter une fonctionnalité de glisser-déposer à vos composants React? Ce n'est pas aussi difficile que vous pourriez le penser.
Le glisser-déposer est un moyen de déplacer ou de manipuler des éléments sur un écran à l'aide d'une souris ou d'un pavé tactile. C'est parfait pour réorganiser une liste d'éléments ou déplacer des éléments d'une liste à une autre.
Vous pouvez créer des composants par glisser-déposer dans React en utilisant l'une des deux méthodes suivantes: les fonctionnalités intégrées ou un module tiers.
Différentes façons d'implémenter le glisser-déposer dans React
Il existe deux façons d'implémenter le glisser-déposer dans React: en utilisant les fonctionnalités intégrées de React ou en utilisant un module tiers. Commence par créer une application React, puis choisissez votre méthode préférée.
Méthode 1: Utilisation des fonctionnalités intégrées
Dans React, vous pouvez utiliser l'événement onDrag pour suivre le moment où l'utilisateur fait glisser un élément et l'événement onDrop pour suivre le moment où il le dépose. Vous pouvez également utiliser les événements onDragStart et onDragEnd pour savoir quand le glissement commence et s'arrête.
Pour rendre un élément déplaçable, vous pouvez définir l'attribut draggable sur true. Par exemple:
importer Réagir, { Composant } depuis 'réagir';classeMonComposants'étendComposant{
rendre() {
retour (
<div
déplaçable
onDragStart={ce.handleDragStart}
onDrag={ce.handleDrag}
onDragEnd={ce.handleDragEnd}
>
Tire moi!
</div>
);
}
}
exporterdéfaut MonComposant ;
Pour rendre un élément déposable, vous pouvez créer les méthodes handleDragStart, handleDrag et handleDragEnd. Ces méthodes s'exécuteront lorsqu'un utilisateur fera glisser l'élément et lorsqu'il le déposera. Par exemple:
importer Réagir, { Composant } depuis 'réagir';classeMonComposants'étendComposant{
handleDragStart (événement) {
// Cette méthode s'exécute lorsque le glissement commence
console.log("Commencé")
}handleDrag (événement) {
// Cette méthode s'exécute lorsque le composant est glissé
console.log("Faire glisser...")
}handleDragEnd (événement) {
// Cette méthode s'exécute lorsque le glissement s'arrête
console.log("Terminé")
}rendre() {
retour (
<div
déplaçable
onDragStart={ce.handleDragStart}
onDrag={ce.handleDrag}
onDragEnd={ce.handleDragEnd}
>
Tire moi!
</div>
);
}
}
exporterdéfaut MonComposant ;
Dans le code ci-dessus, il existe trois méthodes pour gérer le glissement d'un élément: handleDragStart, handleDrag et handleDragEnd. La div a un attribut draggable et définit les propriétés onDragStart, onDrag et onDragEnd sur leurs fonctions correspondantes.
Lorsque vous faites glisser l'élément, la méthode handleDragStart s'exécute en premier. C'est ici que vous pouvez effectuer toutes les configurations dont vous avez besoin, telles que la configuration des données à transférer.
Ensuite, la méthode handleDrag s'exécute à plusieurs reprises pendant que vous faites glisser l'élément. C'est là que vous pouvez faire des mises à jour comme ajuster la position de l'élément.
Enfin, lorsque vous déposez l'élément, la méthode handleDragEnd s'exécute. C'est là que vous pouvez effectuer tout nettoyage dont vous avez besoin, comme réinitialiser les données que vous avez transférées.
Vous pouvez également déplacer le composant sur l'écran dans onDragEnd(). Pour ce faire, vous devrez définir la propriété style du composant. Par exemple:
importer Réagir, { Composant, useState } depuis 'réagir';fonctionMonComposant() {
constante [x, setX] = useState(0);
constante [y, setY] = useState(0);constante handleDragEnd = (événement) => {
ensembleX(événement.clientX);
ensembleY(événement.clientY);
};retour (
<div
déplaçable
onDragEnd={handleDragEnd}
style={{
position: "absolu",
gauche: x,
haut: oui
}}
>
Tire moi!
</div>
);
}
exporterdéfaut MonComposant ;
Le code appelle le hook useState pour suivre la position x et y du composant. Ensuite, dans la méthode handleDragEnd, il met à jour la position x et y. Enfin, vous pouvez définir la propriété style du composant pour le positionner aux nouvelles positions x et y.
Méthode 2: Utiliser un module tiers
Si vous ne souhaitez pas utiliser les fonctionnalités intégrées de React, vous pouvez utiliser un module tiers tel que réagir-glisser-déposer. Ce module fournit un wrapper spécifique à React autour de l'API de glisser-déposer HTML5.
Pour utiliser ce module, vous devez d'abord l'installer en utilisant npm :
npm installer réagir-glisser-et-goutte--sauvegarderEnsuite, vous pouvez l'utiliser dans vos composants React :
importer Réagir, { Composant } depuis 'réagir';
importer { Glissable, Déposable } depuis 'réagir-glisser-déposer' ;classeMonComposants'étendComposant{
rendre() {
retour (
<div>
<Type déplaçable="fou" données="bar">
<div>Tire moi!</div>
</Draggable><Types droppables={['fou']} onDrop={this.handleDrop}>
<div>Déposer ici!</div>
</Droppable>
</div>
);
}handleDrop (données, événement) {
// Cette méthode s'exécute lorsque les données sont supprimées
console.log (données); // 'bar'
}
}
exporterdéfaut MonComposant ;
Commencez par importer les composants Draggable et Droppable depuis le module react-drag-and-drop. Ensuite, utilisez ces composants pour créer un élément déplaçable et un élément déplaçable.
Le composant Draggable accepte une prop de type, qui spécifie le type de données que le composant représente, et une prop de données qui spécifie les données à transférer. Notez que le type est un nom personnalisé que vous pouvez choisir pour savoir quel composant est lequel dans une interface multi-composants.
Le composant Droppable utilise un prop types pour spécifier les types de données que vous pouvez y déposer. Il a également un accessoire onDrop, qui spécifie la fonction de rappel qui s'exécutera lorsque vous déposerez un composant dessus.
Lorsque vous déposez le composant déplaçable sur le déposable, la méthode handleDrop s'exécute. C'est là que vous pouvez effectuer tout traitement que vous devez effectuer avec les données.
Conseils pour créer des composants DnD conviviaux
Il y a quelques choses que vous pouvez faire pour rendre vos composants glisser-déposer plus conviviaux.
Tout d'abord, vous devez fournir un retour visuel lorsqu'un élément est déplacé. Par exemple, vous pouvez modifier l'opacité de l'élément ou ajouter une bordure. Pour ajouter des effets visuels, vous pouvez utiliser le CSS normal ou CSS tailwind dans votre application React.
Deuxièmement, vous devez vous assurer que vos utilisateurs peuvent uniquement faire glisser l'élément vers une cible de dépôt valide. Par exemple, vous pouvez ajouter le les types attribut à l'élément, qui spécifie les types de composants qu'il acceptera.
Troisièmement, vous devez fournir à l'utilisateur un moyen d'annuler l'opération de glisser-déposer. Par exemple, vous pouvez ajouter un bouton permettant à l'utilisateur d'annuler l'opération.
Améliorez l'expérience utilisateur avec le glisser-déposer
La fonctionnalité de glisser-déposer contribue non seulement à améliorer l'expérience utilisateur, mais peut également contribuer aux performances globales de votre application Web. Un utilisateur peut désormais facilement réorganiser l'ordre de certaines données sans avoir à actualiser la page ou à passer par plusieurs étapes.
Vous pouvez également ajouter d'autres animations dans votre application React pour rendre la fonction glisser-déposer plus interactive et conviviale.