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 à l'écran à l'aide d'une souris ou d'un pavé tactile. Il est idéal pour réorganiser une liste d'éléments ou déplacer des éléments d'une liste à une autre. Vérifier Comment créer ReactOS Live sur un disque USB ou un CD-ROM.
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. Commencez par créer votre application React, puis choisissez votre méthode préférée.
Méthode XNUMX : Utiliser les fonctionnalités intégrées
Dans React, vous pouvez utiliser l'événement onDrag pour suivre le moment où un utilisateur fait glisser un élément, et il existe un événement onDrop pour suivre le moment où il a été déposé. Vous pouvez également utiliser les événements onDragStart et onDragEnd pour suivre le démarrage et l'arrêt d'un glissement.
Pour rendre un élément déplaçable, vous pouvez définir l'attribut draggable sur true. Par exemple:
import React, { Component } from ‘react’;
class MyComponent extends Component {
render() {
return (
<div
draggable
onDragStart={this.handleDragStart}
onDrag={this.handleDrag}
onDragEnd={this.handleDragEnd}
>
Drag me!
</div>
);
}
}
export default MyComponent; Pour rendre un élément déposable, vous pouvez créer les méthodes handleDragStart , handleDrag et handleDragEnd . Ces méthodes fonctionneront à la fois lorsque l'utilisateur fera glisser et déposera l'élément. Par exemple:
import React, { Component } from ‘react’;
class MyComponent extends Component {
handleDragStart(event) {
// This method runs when the dragging starts
console.log(“Started”)
}
handleDrag(event) {
// This method runs when the component is being dragged
console.log(“Dragging…”)
}
handleDragEnd(event) {
// This method runs when the dragging stops
console.log(“Ended”)
}
render() {
return (
<div
draggable
onDragStart={this.handleDragStart}
onDrag={this.handleDrag}
onDragEnd={this.handleDragEnd}
>
Drag me!
</div>
);
}
}
export default MyComponent; Dans le code ci-dessus, il existe trois manières de gérer le déplacement 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 l'élément est déplacé, la méthode handleDragStart sera déclenchée en premier. C'est ici que vous pouvez effectuer toutes les configurations nécessaires, telles que la préparation des données à transférer.
Ensuite, la méthode handleDrag est déclenchée de manière récursive pendant que l'élément est glissé. C'est ici que vous pouvez effectuer des mises à jour telles que l'ajustement de la position de l'élément.
Enfin, lorsque l'élément est déposé, la méthode handleDragEnd est déclenchée. C'est ici que vous pouvez effectuer tout nettoyage dont vous avez besoin, comme la réinitialisation des 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 plugin. Par exemple:
import React, { Component, useState } from ‘react’;
function MyComponent() {
const [x, setX] = useState(0);
const [y, setY] = useState(0);
const handleDragEnd = (event) => {
setX(event.clientX);
setY(event.clientY);
};
return (
<div
draggable
onDragEnd={handleDragEnd}
style={{
position: “absolute”,
left: x,
top: y
}}
>
Drag me!
</div>
);
}
export default MyComponent; Le code appelle le hook useState pour suivre les emplacements x et y du composant. Ensuite, dans la méthode handleDragEnd, vous mettez à jour les positions x et y. Enfin, vous pouvez définir la propriété style du composant pour le positionner dans les nouvelles positions x et y. Vérifier Meilleures applications Blockchain construites avec React Native.
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 comme réagir et 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 install react-drag-and-drop — save
Ensuite, vous pouvez les utiliser dans vos composants React :
import React, { Component } from ‘react’;
import { Draggable, Droppable } from ‘react-drag-and-drop’;
class MyComponent extends Component {
render() {
return (
<div>
<Draggable type=”foo” data=”bar”>
<div>Drag me!</div>
</Draggable>
<Droppable types={[‘foo’]} onDrop={this.handleDrop}>
<div>Drop here!</div>
</Droppable>
</div>
);
}
handleDrop(data, event) {
// This method runs when the data drops
console.log(data); // ‘bar’
}
}
export default MyComponent; Commencez par importer les composants Draggable et Droppable à partir du module de glisser-déposer de réaction. Ensuite, utilisez ces composants pour créer un élément déplaçable et un élément déplaçable.
Un composant déplaçable accepte une propriété de type, qui spécifie le type de données représentées par le composant, et une propriété de données, qui spécifie les données à transférer. Notez que type est un nom personnalisé que vous pouvez choisir pour suivre n'importe quel composant dans une interface à plusieurs composants.
Le composant Droppable utilise la propriété types pour spécifier les types de données sur lesquels vous pouvez le déposer. Il a également une propriété onDrop, qui spécifie la fonction de rappel qui sera déclenchée lorsqu'un composant est déposé dessus.
Lorsque vous déposez le composant déplaçable sur le disque déplaçable, la méthode handleDrop sera déclenchée. C'est là que vous pouvez faire toutes les manipulations dont vous avez besoin avec les données.
Conseils pour créer des composants DnD faciles à utiliser
Il y a quelques choses que vous pouvez faire pour rendre les composants glisser-déposer plus conviviaux.
Tout d'abord, un retour visuel doit être fourni lorsqu'un article est prêté. Par exemple, vous pouvez modifier l'opacité d'un élément ou ajouter une bordure. Pour ajouter des effets visuels, vous pouvez utiliser le CSS standard ou le CSS Tailwind dans votre application React.
Deuxièmement, vous devez vous assurer que les utilisateurs peuvent uniquement faire glisser l'élément vers une cible de dépôt valide. Par exemple, vous pouvez ajouter l'attribut types à l'élément, qui spécifie les types de composants qu'il acceptera.
Troisièmement, une méthode doit être fournie à l'utilisateur pour annuler l'opération de glisser-déposer. Par exemple, vous pouvez ajouter un bouton permettant à l'utilisateur d'annuler l'opération. Vérifier Les meilleurs outils gratuits pour créer et développer des jeux sans expérience en programmation.
Expérience utilisateur améliorée avec le glisser-déposer
Non seulement le glisser-déposer aide à améliorer l'expérience utilisateur, mais il peut également contribuer aux performances globales de votre application Web. L'utilisateur peut désormais facilement réorganiser certaines données sans avoir à rafraîchir la page ou à passer par plusieurs étapes.
Vous pouvez également ajouter d'autres animations dans votre application React pour rendre le glisser-déposer plus interactif et facile à utiliser. Vous pouvez voir maintenant Comment configurer la souris pour l'utiliser confortablement.
