简体中文（ZH-CN）English（EN）繁体中文（ZH-TW）日本語（JA）한국어（KO）Melayu（MS）Français（FR）Deutsch（DE）
Heim
Artikel
Fragen und Antworten
Kurs
Thema
Herunterladen
Spiel
Wörterbuch
kürzliche Updates

Heim  >  Artikel  >  Web-Frontend  >  So implementieren Sie das Ziehen von Elementen in HTML5_HTML5-Tutorial-Fähigkeiten

So implementieren Sie das Ziehen von Elementen in HTML5_HTML5-Tutorial-Fähigkeiten

WBOY
WBOYOriginal
2016-05-16 15:51:441553Durchsuche

Viele Frontends verstehen wahrscheinlich nicht, wie man HTML5-Drag-and-Drop implementiert. Dieser Artikel gibt Ihnen einige Ideen. Organisieren und sichern Sie Dateien, um sie später leichter nachschlagen zu können.

Erstes Beispiel:

index.html

XML/HTML-CodeInhalt in die Zwischenablage kopieren
  1. >  
  2. <html>  
  3. <Kopf>  
  4.     <meta charset="UTF- 8">  
  5.     <Titel>ZiehenTitel>  
  6.     <Stil>  
  7.         .box{   
  8.             Breite: 400px;   
  9.             Höhe: 400px;   
  10.             float: links;   
  11.         }   
  12.         #box1{   
  13.             Hintergrund: #CCC;   
  14.         }   
  15.         #box2{   
  16.             Hintergrund: #FF0;   
  17.         }   
  18.     Stil>  
  19. Kopf>  
  20. <Körper>  
  21. <div id="box1"  Klasse="box">div>  
  22. <div id="box2"  Klasse="box">div>  
  23. <img src="http: //pica.zol-img.com.cn/2016/02/1ace90ad77db716547614a18c4a9263g.jpg" alt="" id="img1" />  
JavaScript-Code复制内容到剪贴板
  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 = function(){   
  15.     oBox1 = document.getElementById('box1');   
  16.     oBox2 = document.getElementById('box2');   
  17.     oImg1 = document.getElementById('img1');   
  18.   
  19.     //   
  20.     oBox1.ondragover = oBox2.ondragover = Funktion(e){   
  21.         e.preventDefault();   
  22.     };   
  23.   
  24.     //   
  25.     oImg1.ondragstart = Funktion(e){   
  26.         e.dataTransfer.setData('text', e.target.id);   
  27.     };   
  28.   
  29.     oBox1.ondrop = dropImg;   
  30.     oBox2.ondrop = dropImg;   
  31. };   
  32.   
  33. Funktion dropImg(e){   
  34.     e.preventDefault();   
  35.     var tempImg = document.getElementById(e.dataTransfer.getData('text'));   
  36.     e.target.appendChild(tempImg);   
  37. }    

Wissenspunkte einbeziehen

Die folgenden Ereignisse werden während des Drag-and-Drop-Vorgangs ausgelöst:
Lösen Sie ein Ereignis auf dem Drag-Ziel (Quellelement) aus
ondragstart – der Benutzer startet Ziehen des Elements Wird ausgelöst, wenn
ondrag – Wird ausgelöst, wenn das Element gezogen wird
ondragend – Wird ausgelöst, nachdem der Benutzer das Ziehen des Elements beendet hat

Ereignis wird ausgelöst, wenn das Ziel losgelassen wird
 ondragenter – Dieses Ereignis wird ausgelöst, wenn das mit der Maus gezogene Objekt in seinen Containerbereich gelangt
ondragover – Wenn ein Objekt wird gezogen Dieses Ereignis wird ausgelöst, wenn das gezogene Objekt in den Containerbereich eines anderen Objekts gezogen wird
ondragleave – Dieses Ereignis wird ausgelöst, wenn das mit der Maus gezogene Objekt den Containerbereich verlässt
ondrop – Während eines Ziehvorgangs Dieses Ereignis wird ausgelöst, wenn die Maustaste losgelassen wird

Ereignisobjekt (ersetzt durch e)

e.target

Die Erklärung auf W3Cschool lautet: Geben Sie das Element zurück, das dieses Ereignis ausgelöst hat (den Zielknoten des Ereignisses). Dieses Zielattribut ist nur mit ie9 und höher kompatibel

e.preventDefault()

Brechen Sie die Standardaktion des Ereignisses ab.

e.dataTransfer.setData()

Legen Sie den Datentyp und den Wert der gezogenen Daten fest:

Kopieren Sie den Code
Der Code lautet wie folgt:
e. dataTransfer.setData("Text",ev.target.id); //Der erste Parameter ist Text (Kleinbuchstaben sind ebenfalls akzeptabel)

e.dataTransfer.getData()

Holen Sie sich die gezogenen Daten:

Kopieren Sie den Code
Der Code lautet wie folgt:
e.dataTransfer .getData( "Text");

Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, er wird für das Studium aller hilfreich sein.

Originaltext: http://www.cnblogs.com/oovwall/p/5213580.html

Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：HTML5: Der größte Fortschritt bei Webstandards_HTML5-Tutorial-TippsNächster Artikel：HTML5: Der größte Fortschritt bei Webstandards_HTML5-Tutorial-Tipps

In Verbindung stehende Artikel

Mehr sehen