L'API glisser-déposer est une nouvelle fonctionnalité de HTML5. Par rapport à d'autres nouvelles fonctionnalités, elle représente 60 % de l'importance et 30 % de l'utilisation dans le développement réel. Les exigences d'apprentissage suffisent seulement pour la maîtriser.
2. Qu'est-ce que le glisser-relâcher ?Faites glisser : faites glisser
Sortie : Abandonner
Faire glisser signifie que la souris clique sur l'objet source et continue de déplacer l'objet sans le lâcher. Une fois relâché, il est relâché.
3. Que sont les objets source et les objets cible ?Objet source : fait référence à un objet sur lequel on clique avec la souris. Il peut s'agir d'une image, d'un DIV, d'un morceau de texte, etc.
Objet cible : fait référence au moment où nous faisons glisser l'objet source et le déplaçons vers une zone. L'objet source peut entrer dans cette zone, survoler cette zone (sans lâcher prise) et relâcher l'objet source ici (lâchez déjà prise, vous). peut également quitter la zone après avoir survolé.
4. Fonctions associées de l'API glisser-déposerAprès avoir expliqué ce que sont l'objet source et l'objet cible, revenons à l'API glisser-déposer dans le front-end. À partir des opérations ci-dessus, nous pouvons dériver plusieurs fonctions.
Événements pouvant être déclenchés par l'objet source déplacé :
(1)ondragstart : L'objet source commence à être glissé
(2) ondrag : l'objet source est déplacé (la souris peut ou non bouger)
(3)ondragend : L'objet source est glissé jusqu'à la fin
Faites glisser l'objet source pour saisir les événements pouvant être déclenchés par l'objet cible ci-dessus :
(1)ondragenter : L'objet cible est glissé dans l'objet source
(2) ondragover : l'objet cible est déplacé par l'objet source et survole celui-ci.
(3)ondragleave : l'objet source est éloigné de l'objet cible
(4)ondrop : l'objet source est glissé et relâché/lâché au-dessus de l'objet cible.
L'API glisser-déposer a un total de 7 fonctions ! !
5. Comment transférer des données entre l'événement d'objet source déplacé et l'événement d'objet cibleHTML5 fournit un nouvel attribut pour tous les événements liés au glisser :
e.dataTransfer { } //数据传递对象
Fonction : utilisé pour transmettre des données entre les événements de l'objet source et de l'objet cible
Enregistrez les données dans un gestionnaire d'événements sur l'objet source :
e.dataTransfer.setData( k, v ); //kv必须都是string类型
Lire les données dans un gestionnaire d'événements sur l'objet cible :
var v = e.dataTransfer.getData(k);
Exemple 1 : implémenter un petit avion qui peut se déplacer lorsque la souris est déplacée
Astuce : L'avion doit être positionné de manière absolue ! Obtenez la valeur des coordonnées de la souris dans l'événement ondrag ! ! !
Le code est le suivant :
<!DOCTYPE html> <html> <head lang=en> <meta charset=UTF-8> <title></title> <style> body{ margin:0; position: relative } img{ position:absolute } </style> </head> <body> <h3>Petit avion qui se déplace lorsque la souris est déplacée</h3> <img id=p3 src=img/p3.png <script> p3.ondragstart=function(e){ console.log('La source d'événement p3 commence à glisser'); //Enregistre le décalage de la souris sur l'avion juste après le glissement offsetX= e.offsetX= e. .ondrag=function(e){ console.log('La source d'événement p3 est déplacée'); var x= e.pageX; console.log(x+'-'+y); //Au dernier moment de l'événement glisser, les coordonnées de la souris ne peuvent pas être lues, et pageX et pageY deviennent 0 if(x==0 && y==0 ){ return; // Ne gère pas la situation où X et Y sont 0 au dernier moment du glissement} x-=offsetX; p3.style.left=x+'px'; top=y+'px';} p3.ondragend=function(){ console.log('Le glissement de l'objet source p3 se termine'); } </script> </body> </html>L'effet est le suivant :
Deuxième exemple :
Simule l'effet d'une poubelle dans un ordinateur. Un total de trois petits plans sont affichés. Après avoir fait glisser un petit plan au-dessus de la poubelle, le petit plan est supprimé de l'arborescence DOM.
Astuce : La suppression nécessite de supprimer l'élément du nœud enfant DOM, et le comportement par défaut d'ondragover doit être évité ! ! Utilisez le transfert de données entre l'objet source et l'objet cible pour enregistrer la valeur d'identification du petit avion ! ! !
Informations importantes :
ondragover a un comportement par défaut ! ! ! C'est à ce moment-là qu'ondragover est déclenché, ondrop échouera ! ! ! ! Il peut s'agir d'un problème de version du navigateur, qui ne peut être résolu que si le navigateur est constamment mis à jour à l'avenir ! !
Comment l'arrêter ?
ondragover= function(e){ //Lorsque l'objet source survole l'objet cible e.preventDefault(); //Empêche le comportement par défaut afin que le drop puisse se déclencher...}ondrop= function(e){ // Le l'objet source est libéré dans l'objet cible...}Le code est le suivant :
<!DOCTYPE html> <html> <head lang=en> <meta charset=UTF-8> <title></title> <style> body { text-align: center } #trash { opacité : .2 ; : 15px; } </style> </head> <body> <h3>Supprimer les éléments enfants de l'arborescence DOM après avoir fait glisser le plan vers la poubelle</h3> <img id=trash src=img/trash_full.png> <hr/> <img id=p3 class=src src=img/p3.png> <img id=p4 class=src src=img/p4.png> <img id=p5 classe =src src=img/p5.png> <script> //Ajouter un événement à l'écoute de l'objet source - enregistrer quelle variable d'objet source a été déplacée srcList = document.querySelectorAll('.src');//Rechercher tous les éléments img pour (var i=0; i<srcList.length; i++){ //Traverser les éléments img var p = srcList[i]; = function(e){ //Commencez à faire glisser l'objet source e.dataTransfer.setData('PlaneID',this.id); //Enregistrez les données - l'identifiant de l'élément img } p.ondrag = function(){} p.ondragend = function(){} } //Ajouter un événement à l'écoute de l'objet cible - supprimer l'objet source déplacé trash.ondragend = function(){ //L'objet source entre dans la cible object console .log('drag enter'); trash.style.opacity = 1; //Changer la transparence en 1 } trash.ondragleave= function(){ //Une fois que l'objet source quitte l'objet cible, console.log(' glisser quitter') ; trash.style.opacity = .2; //Changer la transparence à 0,2 } trash.ondragover= function(e){ //L'objet source survole l'objet cible e.preventDefault( //Empêcher le comportement par défaut, Make drop triggerable} trash.ondrop= function(e){ //L'objet source est libéré dans l'objet cible console.log('drop'); trash.style.opacity = .2 //Change la transparence à 0,2; //Supprimer l'objet source déplacé var id = e.dataTransfer.getData('PlaneID'); //Obtenir la valeur des données--id var p = document.getElementById(id); //Rechercher les éléments associés en fonction de la valeur de l'identifiant p. parentNode.removeChild(p); //Supprimer les nœuds enfants de l'élément parent} </script> </body> </html>L'effet est le suivant :
Après avoir fait glisser le petit avion vers la poubelle pour le supprimer :
Comme le montre la photo, il y avait à l'origine trois petits avions, mais maintenant il y en a deux ! ! !
6. Points de connaissances supplémentaires sur l'API glisser-déposer ! ! (Important, on vous le demandera peut-être lors de l'entretien !!)Questions d'entretien :
Comment afficher une image du client (ordinateur) dans une page web ?
Comment faire glisser la page Web du client pour l'afficher dans la page téléchargée côté serveur ?
Que signifient ces deux questions ?
Nous glissons et déposons généralement une image de l'ordinateur vers le navigateur pour mettre en œuvre l'opération de téléchargement ! ! ! Selon les standards antérieurs au H5, il est impossible de glisser-déposer directement une image vers le navigateur pour l'afficher ! ! Mais depuis la sortie des nouvelles fonctionnalités du H5, la fonctionnalité d'API glisser-déposer a été ajoutée, qui réalise parfaitement cette fonction ! ! !
Occasions d'application :
Sur un certain site Web, téléchargez une photo comme avatar
Télécharger une photo...
Nouveaux objets d'opération de fichier en HTML5 :
Fichier : représente un objet fichier
FileList : représente un objet de liste de fichiers, semblable à un tableau.
FileReader : utilisé pour lire les données des fichiers
FileWriter : utilisé pour écrire des données dans des fichiers
Fonctions associées :
div.ondrop = function(e){var f = e.dataTransfer.files[0]; //Trouver le fichier glissé-déposé var fr = new FileReader( //Créer un lecteur de fichier fr.readAsURLData(f); //Lire le contenu du fichier fr.onload = function(){ //Lecture terminée img.src = fr.result //Utiliser les données lues} }Le code est le suivant :
<span style=font-size: 18px;><!DOCTYPE html> <html> <head lang=en> <meta charset=UTF-8> <title></title> <style> #container { border: 1px solid #aaa ; rayon de bordure : 3 px ; remplissage : 10 px ; marge : 10 px ; hauteur minimale : 400 px ; </style> </head> <body> <h1>Connaissance approfondie de l'API glisser-déposer</h1> <h3>Veuillez faire glisser votre photo vers la zone ci-dessous</h3> <div id=container></ div > <script> //Écouter l'événement drop du document - annuler son comportement par défaut : ouvrir l'image dans une nouvelle fenêtre document.ondragover = function(e){ e.preventDefault( //Activer le déclenchement de l'événement drop } document.ondrop = function(e){ e.preventDefault(); //Empêcher l'image de s'ouvrir dans une nouvelle fenêtre, sinon l'opération de téléchargement sera quand même effectuée ! ! ! } //Écoutez l'événement drop de div#container, essayez de lire les données d'image publiées et affichez-les conteneur.ondragover = function(e){ e.preventDefault( } containers.ondrop = function(e){ console .log ("Le client a fait glisser une image et l'a libérée...") //L'objet cible actuel lit les données stockées dans l'objet source glisser-déposer //console.log(e.dataTransfer); //Afficher un problème //console.log(e.dataTransfer.files.length); //Le nombre d'images glissées dans var f0 = e.dataTransfer.files[0]; //console.log(f0); /File object File //Lire les données de l'objet fichier var fr = new FileReader(); //fr.readAsText(f0); //Lire la chaîne de texte du fichier fr.readAsDataURL(f0); //Lire les données URL du fichier fr.onload = function(){ console.log('Lecture du fichier terminée') console.log(fr.result); var img = new Image(); ; //Conteneur de données URL.appendChild(img); } } </script> </body> </html></span>L'effet est le suivant :
RésumerCe qui précède est une explication détaillée des exemples classiques d'API glisser-déposer HTML5 introduits par l'éditeur. J'espère que cela vous sera utile. Si vous avez des questions, veuillez me laisser un message et l'éditeur vous répondra à temps. . Je tiens également à remercier tout le monde pour votre soutien au site d'arts martiaux VeVb !