L'API glisser-déposer est l'une des fonctionnalités les plus intéressantes de HTML. Il nous aide à implémenter des fonctionnalités de glisser-déposer dans les navigateurs Web.

Dans le contexte actuel, nous allons faire glisser des fichiers depuis l'extérieur du navigateur. Lors de la suppression du ou des fichiers, nous les mettons sur une liste et affichons leurs noms. Avec les fichiers en main, nous pourrions alors effectuer une autre opération sur le (s) fichier (s), par ex. téléchargez-les sur un serveur cloud.

Dans ce didacticiel, nous allons nous concentrer sur la façon d'implémenter l'action de glisser-déposer dans une application React. Si vous avez besoin d'une implémentation JavaScript simple vous voudrez peut-être d'abord lire « Comment créer un téléchargeur de fichiers par glisser-déposer avec JavaScript Vanilla », un excellent didacticiel écrit par Joseph Zimmerman il n'y a pas si longtemps.

Le dragenter dragleave dragover Et drop Événements

Là sont huit événements de glisser-déposer différents. Chacun se déclenche à un stade différent de l'opération de glisser-déposer. Dans ce didacticiel, nous nous concentrerons sur les quatre éléments déclenchés lorsqu'un élément est déposé dans une zone de dépôt: dragenter dragleave dragover et drop .

1. L'événement dragenter se déclenche lorsqu'un élément déplacé entre dans une cible de dépôt valide.
2. L'événement dragleave se déclenche lorsqu'un élément déplacé laisse une goutte valide
3. L'événement de survol se déclenche lorsqu'un élément déplacé est glissé sur une cible de dépôt valide. (Il se déclenche toutes les quelques centaines de millisecondes.)
4. L'événement drop se déclenche lorsqu'un élément tombe sur une cible de dépôt valide, c'est-à-dire qu'il est glissé et relâché.

Nous pouvons transformer n'importe quel élément HTML en un élément valide supprimer la cible en définissant les attributs de gestionnaire d'événements ondragover et ondrop .

Vous pouvez tout savoir sur les huit événements des documents Web MDN .

Événements glisser-déplacer dans React

Pour commencer, clonez le référentiel du didacticiel à partir de cette URL:

 https://github.com/chidimo/react-dnd.git

Consultez la branche 01-start . Assurez-vous que le fil est également installé. Vous pouvez l'obtenir sur yarnpkg.com .

Mais si vous préférez, créez un nouveau projet React et remplacez le contenu de App.js par le code ci-dessous:

 importer React à partir de 'react';
import './App.css';

fonction App () {
  revenir (
    

      
 Composant glisser-déposer React 
    
  );
}
exporter l'application par défaut;

Remplacez également le contenu de App.css par le style CSS ci-dessous:

 .App {
  marge: 2rem;
  alignement du texte: centre;
}
h1 {
  couleur: # 07F;
}
.drag-drop-zone {
  rembourrage: 2rem;
  alignement du texte: centre;
  fond: # 07F;
  rayon-frontière: 0,5rem;
  boîte-ombre: 5px 5px 10px # C0C0C0;
}
.drag-drop-zone p {
  couleur: #FFF;
}
.drag-drop-zone.inside-drag-area {
  opacité: 0,7;
}
.dropped-files li {
  couleur: # 07F;
  rembourrage: 3px;
  alignement du texte: gauche;
  poids de police: gras;
}

Si vous avez cloné le dépôt, émettez les commandes suivantes (dans l'ordre) pour démarrer l'application:

 yarn # install dependencies
fil démarrer # démarrer l'application

L'étape suivante consiste à créer un composant glisser-déposer. Créez un fichier DragAndDrop.js dans le dossier src / . Entrez la fonction suivante dans le fichier:

 import React from 'react';

const DragAndDrop = props => {
  const handleDragEnter = e => {
    e.preventDefault ();
    e.stopPropagation ();
  };
  const handleDragLeave = e => {
    e.preventDefault ();
    e.stopPropagation ();
  };
  const handleDragOver = e => {
    e.preventDefault ();
    e.stopPropagation ();
  };
  const handleDrop = e => {
    e.preventDefault ();
    e.stopPropagation ();
  };
  revenir (
    
 handleDrop (e)}
      onDragOver = {e => handleDragOver (e)}
      onDragEnter = {e => handleDragEnter (e)}
      onDragLeave = {e => handleDragLeave (e)}
    >
      
 Faites glisser les fichiers ici pour les télécharger 
    
  );
};
exporter DragAndDrop par défaut;

Dans le retour div nous avons défini nos attributs de gestionnaire d'événements HTML . Vous pouvez voir que la seule différence par rapport au HTML pur est le boîtier en chameau.

Le div est maintenant une cible de dépôt valide puisque nous avons défini le onDragOver ] et onDrop attributs du gestionnaire d'événements.

Nous avons également défini des fonctions pour gérer ces événements.

Pour chacun des gestionnaires d'événements, nous appelons preventDefault () pour empêcher le navigateur d'exécuter son comportement par défaut. Le comportement par défaut du navigateur consiste à ouvrir le fichier déposé. Nous appelons également stopPropagation () pour nous assurer que l'événement n'est pas propagé des éléments enfant aux parents.

Importez le composant DragAndDrop dans le composant App App et le rendre sous l'en-tête.

 

  
 Composant React par glisser-déposer 
  

Maintenant, visualisez le composant dans le navigateur et vous devriez voir quelque chose comme l'image ci-dessous.