La fa?on d'ajouter des fonctionnalités de glisser-déposer à une page Web est d'utiliser l'API Drag and Drop de HTML5, qui est en charge nativement sans bibliothèques supplémentaires. Les étapes spécifiques sont les suivantes: 1. Définissez l'élément drawgable = "true" pour activer glisser; 2. écoutez les événements DragStart, Dragover, Drop and Dragend; 3. Définissez les données dans DragStart, bloquez le comportement par défaut dans Dragover et gérez la logique dans Drop. En outre, le mouvement des éléments peut être réalisé via l'appendchild et le téléchargement de fichiers peut être réalisé via e.datatransfer.files. REMARQUE: PARVERDEFAULT () doit être appelé pour déclencher une goutte. Le c?té mobile prend mal. Il est recommandé d'utiliser une bibliothèque tierce pour un tri complexe.

Il n'est en fait pas difficile d'ajouter des fonctions de glisser-déposer aux pages Web, et il peut être réalisé à l'aide de l'API Drag and Drop de HTML5. Il est soutenu nativement et ne nécessite pas l'introduction de bibliothèques supplémentaires. Il convient aux interactions telles que les téléchargements de fichiers et le tri des éléments.

Préparation: définir des éléments dragables

Pour faire glisser un élément, ajoutez d'abord l'attribut draggable="true" . Par exemple, une <div> ou l'image ne peut pas être glissée par défaut, mais l'événement de glisser peut être déclenché après avoir ajouté cette propriété. <img src="/static/imghw/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/175165462390139.jpeg" class="lazy" alt="Ajout de la fonctionnalité de glisser-déposer à l'aide de l'API HTML5 GRAG et Drop."><pre class='brush:php;toolbar:false;'> &lt;div draggable = &quot;true&quot;&gt; glisser-moi pour essayer &lt;/div&gt;</pre><p> Ensuite, vous devez écouter plusieurs événements clés: <code>dragstart , dragover , drop and dragend . Ces événements correspondent aux actions de la tra?née de démarrage, de la tra?née sur la zone cible, de la libération de la souris et de la tra?née des extrémités.

Processus de base de la tra?née et de la chute

L'opération de tra?née et de chute est principalement divisée en trois étapes:

• Commencez à faire glisser : définissez des données de glisser-filet et des effets dans dragstart .
• Glisser vers la zone cible : bloquer le comportement par défaut dans dragover , sinon drop ne peut pas être déclenchée.
• Placement gratuit : traitez les données en drop et entièrement logique.

Par exemple, vous souhaitez faire glisser une bo?te dans une autre zone:

 const dragel = document.QuerySelector ('# drag');
const dropzone = document.QuerySelector ('# drop-zone');

dragel.addeventListener ('dragstart', (e) => {
  e.datatransfer.setData (?Text / Plain?, ?Ceci est tra?né des données?);
});

dropzone.addeventListener ('dragover', (e) => {
  E.PreventDefault (); // Le comportement par défaut doit être bloqué afin de déclencher une goutte
});

dropzone.addeventListener ('drop', (e) => {
  const data = e.datatransfer.getData ('texte / plaine');
  Console.log (?Données re?ues:?, données);
});

Cela complète l'interaction la plus basique de glisser-déposer.

Glisser-déposer avancé: déplacer des éléments ou des téléchargements de fichiers

En plus de passer des données de texte, vous pouvez également utiliser la glisser-déposer pour déplacer les éléments DOM ou télécharger des fichiers.

Par exemple, si vous souhaitez faire glisser un élément d'un conteneur à un autre, vous pouvez ajouter le n?ud vers le nouvel emplacement lors de drop :

 dropzone.addeventListener ('drop', (e) => {
  const id = e.datatransfer.getData ('texte / plaine');
  const draggedEl = document.getElementById (id);
  DropZone.ApendChild (DraggedEl);
});

S'il s'agit d'un scénario de téléchargement de fichiers, comme faire glisser une image locale vers la page, vous pouvez obtenir la liste de fichiers via e.dataTransfer.files :

 dropzone.addeventListener ('drop', (e) => {
  const Files = E.Datatransfer.Files;
  pour (let fichier de fichiers) {
    if (file.type.startswith ('image /')) {
      const Reader = new FileReader ();
      reader.onload = () => {
        const img = document.createElement ('img');
        img.src = reader.result;
        dropzone.appendChild (IMG);
      };
      Reader.ReadAsDataurl (fichier);
    }
  }
});

Cette partie du code peut être directement prévisualisée après avoir fait glisser l'image.

Notes et FAQ

Certains détails sont facilement négligés lors de l'utilisation de l'API HTML5 Drag and Drop:

• dragover doit appeler preventDefault() , sinon drop ne sera pas déclenchée
• Différents navigateurs peuvent avoir une prise en charge différente pour les styles de glisser-déposer, tels que la glisser et le curseur.
• La prise en charge mobile pour la tra?née et la chute natives n'est pas très bonne, et des événements tactiles supplémentaires sont requis
• Si vous souhaitez faire un tri et dép?t complexe, vous pouvez envisager de combiner des bibliothèques tierces (comme SortableJS)

Fondamentalement, tout cela. Bien que la fonction de tra?née et de dép?t de HTML5 soit simple, elle peut également produire de bons effets d'interaction après utilisation.