recherche

Maison >interface Web >Tutoriel H5 >Comment implémenter le glissement d'éléments dans les compétences du didacticiel HTML5_html5

Comment implémenter le glissement d'éléments dans les compétences du didacticiel HTML5_html5

WBOY
WBOYoriginal
2016-05-16 15:51:441616parcourir

De nombreux frontaux ne comprennent probablement pas comment implémenter le glisser-déposer HTML5. Cet article vous donne quelques idées. Organisez et sauvegardez les fichiers pour pouvoir les consulter facilement plus tard.

Premier exemple :

index.html

Code XML/HTMLCopier le contenu dans le presse-papiers
  1. >  
  2. <html>  
  3. <tête>  
  4.     <meta charset="UTF- 8">  
  5.     <titre>Faites glissertitre>  
  6.     <style>  
  7.         .box{   
  8.             largeur : 400 px ;   
  9.             hauteur : 400 px ;   
  10.             flotteur : gauche ;   
  11.         }   
  12.         #box1{   
  13.             arrière-plan : #CCC ;   
  14.         }   
  15.         #box2{   
  16.             arrière-plan : #FF0 ;   
  17.         }   
  18.     style>  
  19. tête>  
  20. <corps>  
  21. <div id="box1"  classe="boîte">div>  
  22. <div id="box2"  classe="boîte">div>  
  23. <img src="http : //pica.zol-img.com.cn/2016/02/1ace90ad77db716547614a18c4a9263g.jpg" alt="" id="img1" />  
Code JavaScript复制内容到剪贴板
  1. "app1.js">   
  2.   
  3.   
  4.   
  5. app1.js   
  6. /** 
  7.  *   app1.js  
  8.  */  
  9.   
  10. var oBox1,   
  11.     oBox2,   
  12.     oImg1;   
  13.   
  14. window.onload = fonction(){   
  15.     oBox1 = document.getElementById('box1');   
  16.     oBox2 = document.getElementById('box2');   
  17.     oImg1 = document.getElementById('img1');   
  18.   
  19.     //   
  20.     oBox1.ondragover = oBox2.ondragover = fonction(e){   
  21.         e.preventDefault();   
  22.     } ;   
  23.   
  24.     //   
  25.     oImg1.ondragstart = fonction(e){   
  26.         e.dataTransfer.setData('text', e.target.id);   
  27.     } ;   
  28.   
  29.     oBox1.ondrop = dropImg;   
  30.     oBox2.ondrop = dropImg;   
  31. } ;   
  32.   
  33. fonction dropImg(e){   
  34.     e.preventDefault();   
  35.     var tempImg = document.getElementById(e.dataTransfer.getData('text'));   
  36.     e.target.appendChild(tempImg);   
  37. }    

Implantant des points de connaissances

Les événements suivants seront déclenchés lors du processus de glisser-déposer :
Déclencher un événement sur la cible du glisser (élément source)
ondragstart - l'utilisateur démarre faire glisser l'élément Déclenché lorsque
ondrag - Déclenché lorsque l'élément est déplacé
ondragend - Déclenché une fois que l'utilisateur a fini de faire glisser l'élément

Événement déclenché lorsque la cible est relâchée
 ondragover - Cet événement est déclenché lorsque l'objet glissé par la souris entre dans la portée de son conteneur
ondragover - Lorsqu'un objet est glissé Cet événement est déclenché lorsque l'objet glissé est déplacé dans la plage du conteneur d'un autre objet
ondragleave - Cet événement est déclenché lorsque l'objet déplacé par la souris quitte la plage du conteneur
ondrop - Lors d'un processus de glissement, Cet événement est déclenché lorsque le bouton de la souris est relâché

objet événement (remplacé par e)

e.cible

L'explication sur W3Cschool est : Renvoie l'élément qui a déclenché cet événement (le nœud cible de l'événement) Cet attribut cible n'est compatible qu'avec ie9 et supérieur

.

e.preventDefault()

Annuler l'action par défaut de l'événement.

e.dataTransfer.setData()

Définissez le type de données et la valeur des données glissées :

Copiez le code
Le code est le suivant :
e. dataTransfer.setData("Text",ev.target.id); //Le premier paramètre est Text (les minuscules sont également acceptables)

e.dataTransfer.getData()

Récupérez les données glissées :

Copiez le code
Le code est le suivant :
e.dataTransfer .getData( "Texte");

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.

Texte original : http://www.cnblogs.com/oovwall/p/5213580.html

Déclaration：
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Article précédent：HTML5 : le plus grand pas en avant dans les conseils du didacticiel sur les normes Web_html5Article suivant：HTML5 : le plus grand pas en avant dans les conseils du didacticiel sur les normes Web_html5

Articles Liés

Voir plus