Implémentation de la fonctionnalité de glisser-déposer à l'aide d'API HTML

Les étapes clés pour implémenter la fonction draggable incluent: 1. Utilisez l'attribut draggable de HTML5 pour rendre les éléments draggables; 2. Définissez les données de glisser via l'événement DragStart; 3. Écoutez la logique de placement de traitement des événements Dragover et Drop dans la zone cible; 4. Utilisez l'objet FileList pour réaliser le téléchargement de glisser-déposer. L'API DRAG et DROP native HTML5 utilise une série de processus de contrôle d'événements, tels que DragStart, Dragover, Drop, etc., où les éléments personnalisés Draggables doivent être définis pour définir DragGable = "true" et Bind DragStart l'événement, et les appels setData () pour enregistrer des données. Lors de la gestion de glisser-déposer, le comportement par défaut de Dragover doit être bloqué pour déclencher l'événement de dépôt et obtenir des données via GetData () pour terminer le mouvement des éléments ou le traitement de fichiers. Lors du téléchargement de fichiers, vous devez lire la liste de fichiers à partir de datatransfer.files pour éviter un accès direct au chemin. Une erreur courante est que le comportement par défaut est manquant pour empêcher le contenu de glisser-déposer d'être reçu.

La mise en œuvre des fonctions de glisser-déposer n'est pas compliquée, surtout lorsque vous connaissez déjà HTML et JavaScript. HTML5 fournit une API de glisser-déposer native qui nous permet de compléter les interactions de glisser-déposer de base sans compter sur des bibliothèques tierces. Jetons un coup d'œil à quelques points clés pour vous aider à démarrer rapidement.

Qu'est-ce que l'API HTML Drag and Drop?

L'API DRAG et DROP natif de HTML5 permet aux utilisateurs de "faire glisser" des éléments avec leur souris et de les "placer" vers un autre endroit. Cette fonction est souvent utilisée dans des scénarios tels que le téléchargement de fichiers, le tri des éléments, etc.

Il contrôle principalement le processus de traînée et de dépôt à travers une série d'événements, notamment dragstart , dragover , drop , etc. Comprendre le rôle et l'ordre de déclenchement de ces événements est la première étape de l'utilisation de l'API.

Comment rendre un élément dragable?

Par défaut, seuls les liens, les images et certains éléments de formulaire sont dragables. Si vous souhaitez que vous souhaitez traîner des éléments personnalisés (tels que les divs), vous devez définir les propriétés:

 <div draggable = "true"> glisser-moi pour essayer </div>

Ensuite, liez l'événement dragstart , qui indique au navigateur quoi faire glisser:

 document.QuerySelect
    e.datatransfer.setData ("texte / plaine", e.target.id);
});

Le point le plus critique ici est d'appeler setData() pour enregistrer les données traînées afin qu'elle puisse être obtenue dans la zone cible.

Comment faire glisser et tomber dans la zone cible?

Ensuite, vous devez spécifier un ou plusieurs «zones de livraison», qui sont des endroits où se dérouler dans le contenu. La pratique habituelle consiste à écouter les événements dragover et drop .

• dragover : le comportement par défaut doit être bloqué, sinon drop ne se déclenche pas.
• drop : obtenez des données glisser ici et traitez-les.

L'exemple de code est le suivant:

 const dropzone = document.getElementById («drop-zone»);

dropzone.addeventListener ('dragover', fonction (e) {
    E.PreventDefault (); // Le comportement par défaut doit être bloqué});

dropzone.addeventListener ('drop', fonction (e) {
    E.PreventDefault ();
    const data = e.datatransfer.getData ("texte / plaine");
    const draggedElement = document.getElementById (data);
    dropzone.appendChild (draggedElement);
});

Une erreur courante consiste à oublier de bloquer le comportement par défaut afin que le contenu de glisser-déposer ne puisse pas être reçu correctement.

Comment télécharger des fichiers en faisant glisser et en abandonnant?

Si vous souhaitez prendre en charge le téléchargement de glisser-déposer des fichiers, tels que la permettant aux utilisateurs de faire glisser des fichiers locaux dans les pages Web à télécharger, vous devez utiliser FileList .

Vous pouvez écouter les événements drop et obtenir la liste de fichiers à partir d' e.dataTransfer.files :

 dropzone.addeventListener ('drop', fonction (e) {
    E.PreventDefault ();
    const Files = E.Datatransfer.Files;
    pour (que i = 0; i <files.length; i) {
        console.log (fichiers [i] .name); // Imprimer le nom du fichier}
});

Cette méthode est souvent utilisée pour des fonctions telles que le téléchargement d'images et l'importation de documents. Il convient de noter que certains navigateurs restreignent les chemins d'accès à certains types de fichiers, alors essayez d'éviter de lire directement les chemins de fichier.

Fondamentalement, c'est tout. Après avoir maîtrisé ces étapes clés, vous pouvez étendre vos fonctions en fonction de vos besoins, tels que l'ajout de commentaires visuels, en soutenant plusieurs glisser-déposer de sélection, etc. Bien qu'il semble un peu lourd, il n'est en fait pas difficile de le faire étape par étape.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!