L'API de glisser-déposer HTML5 est une interface de fonction de glisser-déposer à prise en charge nativement du navigateur. 1. Il contr?le le processus de glisser-déposer via des événements tels que DragStart, Drag, Dragend, Dragter, Dragover, Drop, DragLeave, etc.; 2. Lors de la mise en ?uvre, draggable = "true" doit être défini et les fonctions de traitement des événements sont liées, telles que la définition des données dans dragstart, et les données de Drop sont obtenues; 3. Les notes incluent: e.PreventDefault () doit être appelé dans Dragover pour déclencher une gachette, DataTransfer est utilisé pour transmettre des données et les fichiers sont traités directement via FileList lors de la tra?née des fichiers. Le comportement par défaut de certains navigateurs doit être bloqué et le glisser-déposer du domaine croisé peut être soumis à des restrictions de sécurité. Cette API peut être utilisée dans des scénarios tels que le téléchargement de fichiers, le tri de liste, etc., mais vous devez faire attention aux problèmes de compatibilité et d'expérience utilisateur.

L'API Drag and Drop de HTML5 est un ensemble d'interfaces fournies par le navigateur, vous permettant d'implémenter facilement la fonction de glisser-déposer des éléments. Vous n'avez pas besoin de compter sur des bibliothèques tierces, vous pouvez le faire en utilisant JavaScript et HTML. Il convient pour le téléchargement de fichiers, le tri de liste, la tra?née des composants et d'autres scénarios.

Processus de base de glisser-déposer

Les opérations de glisser-déposer sont en fait un processus composé de plusieurs événements:

• DragStart : tiré lorsque l'utilisateur commence à faire glisser un élément
• tra?ner : déclenché en continu pendant la tra?née
• Dragend : déclenché lorsque la tra?née se termine (qu'elle soit déposée ou annulée)
• DRAGENTER : déclenché lorsque l'élément tra?né entre dans la zone cible
• Dragover : déclenché en continu lors de la tra?née dans la zone cible
• Drop : tiré lorsque l'élément est libéré dans la zone cible
• DragLeave : déclenché lorsque l'élément tra?né quitte la zone cible

Il vous suffit de lier les fonctions de traitement correspondantes sur ces n?uds clés pour contr?ler l'intégralité du comportement de glisser-déposer. Par exemple, définissez les données glissées dans dragstart et gérez la réception des données et l'exécution logique dans drop .

Implémenter un exemple simple de glisser-déposer

Supposons que vous souhaitiez faire glisser un div dans une autre div, l'approche la plus élémentaire est:

 <div id = "draggable" draggable = "true"> glisser-moi pour essayer </div>
<div id = "droptarget"> mettez-le ici </div>

<cript>
const daggable = document.getElementById (?draggable?);
const droptarget = document.getElementById (&#39;droptarget&#39;);

draggable.addeventListener (&#39;dragstart&#39;, fonction (e) {
  e.datatransfer.setData (?Text / Plain?, ?Ce sont les données tra?nées?);
});

droptarget.addeventListener (&#39;dragover&#39;, fonction (e) {
  E.PreventDefault (); // Le comportement par défaut doit être bloqué pour déclencher une goutte
});

droptarget.addeventListener (&#39;drop&#39;, fonction (e) {
  E.PreventDefault ();
  const data = e.datatransfer.getData (&#39;texte / plaine&#39;);
  Console.log (?Données re?ues:?, données);
});
</cript>

Quelques points à noter:

• Pour rendre l'élément Draggable, draggable="true" doit être ajouté
• Dans dragover , assurez-vous d'appeler e.preventDefault() , sinon la goutte ne prendra pas effet
• dataTransfer est un objet utilisé pour transmettre des données, prend en charge plusieurs formats et le texte couramment utilisé

Des questions et des notes fréquemment posées

Lorsque vous utilisez cette API, certains détails sont faciles à ignorer mais sont importants:

• ? Les méthodes de traitement sont différentes lors de la tra?née et de la suppression des fichiers
  Si vous faites glisser des fichiers (tels que des images) du système d'exploitation, vous comptez principalement sur l'écoute des événements drop pour obtenir FileList , plut?t que via setData/GetData .

• ? Ne confondez pas Dragover et laissez tomber
  Beaucoup de gens pensent que dragover ne sera déclenché qu'une seule fois, mais en fait, il est déclenché en continu. Si vous y faites trop, cela peut affecter les performances.

• ? Un comportement par défaut du navigateur doit être bloqué manuellement
  Par exemple, lors de la tra?née d'un lien ou d'une image, le navigateur peut ouvrir une nouvelle page ou le télécharger seul. à l'heure actuelle, vous devez appeler preventDefault dragstart ou drop pour empêcher ces comportements.

• ? Croisement et goutte peut être restreint
  Si vous faites glisser du contenu à partir d'autres sites Web, certains navigateurs ont des restrictions de politique de sécurité, en particulier en ce qui concerne les données sensibles.

Fondamentalement, c'est tout. L'API Drag and Drop ne semble pas compliquée, mais elle doit faire face à de nombreuses situations limites dans les applications réelles, en particulier la compatibilité et l'expérience utilisateur. En ma?trisant ces événements et techniques de noyau, vous pouvez créer des fonctions pratiques de glisser-déposer.

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!