Il faut 5 minutes pour comprendre le glisser-déposer de html5, ainsi que l'ordre des autres événements de surveillance et d'exécution.
Définition et utilisationLes événements suivants seront déclenchés lors du processus de glisser-déposer :
Déclenchez un événement sur la cible du glisser (élément source) :
Événements déclenchés lorsque la cible est libérée :
Internet Explorer 9+, Firefox, Opera, Chrome et Safari prennent en charge le glisser-déposer.
Remarque : Safari 5.1.2 ne prend pas en charge le glisser ; lors du déplacement d'un élément, l'événement ondragover est déclenché toutes les 350 millisecondes.
Les exemples sont les suivants :
<!DOCTYPE html><html lang=en><head> <meta charset=UTF-8> <meta name=viewport content=width=device-width, initial-scale=1.0> <meta http-equiv=X-UA -Compatible content=ie=edge> <title>Exemple concis de glisser-déposer de 5 minutes</title> <style> #draggable { width: 200px height: 20px; text-align: center; background: white; } .dropzone { width: 20px; background: blueviolet; margin-bottom: 10px; .addEventListener(dragstart, function (événement) { console.log('==========dragstart Commencer à être glissé==========Un glisser n'est exécuté qu'une seule fois'); // Enregistre la référence de l'élément glissé (réf.) dragged = event.target; // Le rend translucide event.target . style.opacity = .5; }, false); /* L'événement glisser est déclenché lorsque l'élément cible est déplacé*/ document.addEventListener(drag, function (event) { // console.log('==========drag==========Le glisser continuera à surveiller jusqu'à ce que l'élément soit supprimé' }, false); element Événements déclencheurs */ document.addEventListener(dragover, function (event) { // console.log('==========dragover========== Écoutera toujours lors du glisser, Jusqu'à ce que l'élément soit supprimé'); // Empêche l'action par défaut pour activer le drop event.preventDefault(); }, false); document.addEventListener(dragenter, function (event) { console.log('==========dragenter fait glisser l'élément dans l'élément cible ==========correspond to dragleave '); // Mettez en surbrillance le nœud cible lorsque l'élément déplaçable entre dans la zone de dépôt if (event.target.className == dropzone) { event.target.style.background = purple } }, false); document.addEventListener(dragleave, function (event) { console.log('==========dragleave éloigne l'élément de l'élément cible==========correspond à dragenter') ; // Lorsque l'élément déplacé quitte le nœud cible déposable, réinitialisez son arrière-plan if (event.target.className == dropzone) { event.target.style.background = ; false (événement ) { console.log('==========drop drop element==========Un glisser n'est exécuté qu'une seule fois, déclenché avant dragenter' // Empêcher les actions par défaut (telles que l'ouverture); Liens vers certains éléments) event.preventDefault(); // Déplace l'élément déplacé vers le nœud de zone de dépôt sélectionné if (event.target.className == dropzone) { event.target.style.background = ; dragged.parentNode .removeChild( traîné); event.target.appendChild(dragged); } }, false); document.addEventListener(dragend, function (event) { console.log('==========dragend termine le glisser====== =====Un glisser n'est exécuté qu'une seule fois'); //Réinitialiser la transparence event.target.style.opacity = ; false); </script></head><body> <div class=dropzone> < identifiant div = déplaçable draggable=true ondragstart=event.dataTransfer.setData('text/plain',null)> Ceci est un DIV qui peut être glissé </div> </div> <div class=dropzone></div> <div class= dropzone ></div> <div class=dropzone></div></body></html>Ce qui précède représente l’intégralité du contenu de cet article. J’espère qu’il sera utile à l’étude de chacun. J’espère également que tout le monde soutiendra le réseau VeVb Wulin.