Die Drag-and-Drop-API ist eine neue Funktion von HTML5 und macht 60 % der Bedeutung und 30 % der Nutzung in der tatsächlichen Entwicklung aus.
2. Was ist Drag & Release?Ziehen: Ziehen
Veröffentlichung: Drop
Ziehen bedeutet, dass die Maus auf das Quellobjekt klickt und das Objekt weiterbewegt, ohne es loszulassen.
3. Was sind Quellobjekte und Zielobjekte?Quellobjekt: Bezieht sich auf etwas, das wir mit der Maus anklicken. Es kann ein Bild, ein DIV, ein Textstück usw. sein.
Zielobjekt: Bezieht sich darauf, dass wir das Quellobjekt ziehen und in einen Bereich verschieben. Das Quellobjekt kann über diesen Bereich schweben (ohne loszulassen) und das Quellobjekt hier loslassen (bereits loslassen). kann das Gebiet auch nach dem Schweben verlassen.
4. Verwandte Funktionen der Drag-and-Drop-APINachdem wir erklärt haben, was das Quellobjekt und das Zielobjekt sind, kehren wir zur Drag-and-Drop-API im Frontend zurück. Aus den oben genannten Vorgängen können wir mehrere Funktionen ableiten
Ereignisse, die durch das gezogene Quellobjekt ausgelöst werden können:
(1)ondragstart: Das Quellobjekt wird gezogen
(2)ondrag: Das Quellobjekt wird gezogen (die Maus kann sich bewegen oder nicht)
(3)ondragend: Das Quellobjekt wird an das Ende gezogen
Ziehen Sie das Quellobjekt, um die Ereignisse einzugeben, die durch das Zielobjekt oben ausgelöst werden können:
(1)Dragagenter: Das Zielobjekt wird in das Quellobjekt gezogen
(2) ondragover: Das Zielobjekt wird vom Quellobjekt gezogen und schwebt darüber.
(3)ondragleave: Das Quellobjekt wird vom Zielobjekt weggezogen
(4)ondrop: Ziehen Sie das Quellobjekt und lassen Sie es über dem Zielobjekt los
Die Drag-and-Drop-API verfügt über insgesamt 7 Funktionen! !
5. So übertragen Sie Daten zwischen dem Ereignis des gezogenen Quellobjekts und dem Ereignis des ZielobjektsHTML5 bietet ein neues Attribut für alle Drag-bezogenen Ereignisse:
e.dataTransfer { } //数据传递对象
Funktion: Wird verwendet, um Daten zwischen Ereignissen des Quellobjekts und des Zielobjekts zu übergeben
Speichern Sie Daten in einem Event-Handler für das Quellobjekt:
e.dataTransfer.setData( k, v ); //kv必须都是string类型
Daten in einem Event-Handler für das Zielobjekt lesen:
var v = e.dataTransfer.getData(k);
Beispiel 1: Implementieren Sie ein kleines Flugzeug, das sich bewegen kann, wenn die Maus gezogen wird
Tipp: Das Flugzeug muss absolut positioniert sein! Holen Sie sich den Koordinatenwert der Maus im Ondrag-Ereignis! ! !
Der Code lautet wie folgt:
<!DOCTYPE html> <html> <head lang=en> <meta charset=UTF-8> <title></title> <style> body{ margin:0; </style> </head> <body> <h3>Kleine Ebene, die sich bewegt, wenn die Maus gezogen wird</h3> <img id=p3 src=img/p3.png <script> p3.ondragstart=function(e){ console.log('Ereignisquelle p3 beginnt mit dem Ziehen'); //Zeichnen Sie den Versatz der Maus auf der Ebene direkt nach dem Ziehen auf offsetX= e.offsetX; } p3 .ondrag=function(e){ console.log('Ereignisquelle p3 wird gezogen'); console.log(x+'-'+y); //Im letzten Moment des Drag-Ereignisses können die Koordinaten der Maus nicht gelesen werden und sowohl pageX als auch pageY werden 0 if(x==0 && y==0 ){ return; // Behandeln Sie nicht die Situation, in der sowohl X als auch Y im letzten Moment des Ziehens sind.} x-=offsetX; top=y+'px'; p3.ondragend=function(){ console.log('Quellobjekt p3 ziehen endet'); } </script> </body> </html>Der Effekt ist wie folgt:
Beispiel zwei:
Simuliert den Effekt eines Papierkorbs in einem Computer. Es werden insgesamt drei kleine Ebenen angezeigt. Nach dem Ziehen einer kleinen Ebene an den oberen Rand des Papierkorbs wird die kleine Ebene aus dem DOM-Baum gelöscht.
Tipp: Zum Löschen muss das Element aus dem untergeordneten DOM-Knoten entfernt werden und das Standardverhalten von ondragover muss verhindert werden! ! Nutzen Sie die Datenübertragung zwischen Quellobjekt und Zielobjekt, um den ID-Wert des Kleinflugzeugs aufzuzeichnen! ! !
Wichtige Informationen:
ondragover hat ein Standardverhalten! ! ! Wenn Ondragover ausgelöst wird, schlägt Ondrop fehl! ! ! ! Möglicherweise handelt es sich um ein Problem mit der Browserversion, das möglicherweise nur gelöst werden kann, wenn der Browser in Zukunft kontinuierlich aktualisiert wird! !
Wie kann man es stoppen?
ondragover= function(e){ //Wenn das Quellobjekt über dem Zielobjekt schwebt e.preventDefault(); //Verhindern Sie das Standardverhalten, damit das Ablegen ausgelöst werden kann...}ondrop= function(e){ // Das Quellobjekt wird im Zielobjekt freigegeben...}Der Code lautet wie folgt:
<!DOCTYPE html> <html> <head lang=en> <meta charset=UTF-8> <title></title> <style> body { text-align: center } #trash { opacity: .2; : 15px; } </style> </head> <body> <h3>Untergeordnete Elemente aus dem DOM-Baum löschen, nachdem die Ebene in den Papierkorb gezogen wurde</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 class =src src=img/p5.png> <script> //Ereignisüberwachung für das Quellobjekt hinzufügen – aufzeichnen, welche Quellobjektvariable gezogen wurde srcList = document.querySelectorAll('.src');//Alle img-Elemente finden for(var i=0; i<srcList.length; i++){ //img-Elemente durchlaufen var p = srcList[i]; p.ondragstart = function(e){ //Starten Sie das Ziehen des Quellobjekts e.dataTransfer.setData('PlaneID',this.id); //Speichern Sie die Daten – die ID des img-Elements } p.ondrag = function(){} p.ondragend = function(){} } //Ereignisüberwachung für das Zielobjekt hinzufügen – gezogenes Quellobjekt löschen trash.ondragenter = function(){ //Das Quellobjekt betritt das Ziel object console .log('drag enter'); trash.style.opacity = 1; //Transparenz auf 1 ändern } trash.ondragleave= function(){ //Nachdem das Quellobjekt das Zielobjekt verlässt, console.log(' ziehen verlassen'); trash.style.opacity = .2; //Transparenz auf 0,2 ändern } trash.ondragover= function(e){ //Das Quellobjekt schwebt über dem Zielobjekt e.preventDefault(); //Verhindern Sie das Standardverhalten, Make drop triggerable} trash.ondrop= function(e){ //Das Quellobjekt wird im Zielobjekt freigegeben console.log('drop'); trash.style.opacity = .2; //Ändern Sie die Transparenz auf 0,2 //Das gezogene Quellobjekt löschen var id = e.dataTransfer.getData('PlaneID'); //Daten abrufen - ID-Wert var p = document.getElementById(id); //Suchen Sie verwandte Elemente basierend auf dem ID-Wert p. parentNode.removeChild(p); //Untergeordnete Knoten aus übergeordnetem Element entfernen} </script> </body> </html>Der Effekt ist wie folgt:
Nachdem Sie das kleine Flugzeug zum Löschen in den Papierkorb gezogen haben:
Wie auf dem Bild zu sehen ist, gab es ursprünglich drei kleine Flugzeuge, aber jetzt sind es zwei! ! !
6. Ergänzende Wissenspunkte zur Drag-and-Drop-API! ! (Wichtig, möglicherweise werden Sie während des Vorstellungsgesprächs gefragt!!)Fragen im Vorstellungsgespräch:
Wie zeige ich ein Bild vom Client (Computer) auf einer Webseite an?
Wie ziehe ich die Webseite des Clients, um sie auf der serverseitig heruntergeladenen Seite anzuzeigen?
Was bedeuten diese beiden Fragen?
Normalerweise ziehen wir ein Bild per Drag & Drop vom Computer in den Browser, um den Download-Vorgang durchzuführen! ! ! Gemäß den Standards vor H5 ist es nicht möglich, ein Bild direkt per Drag & Drop in den Browser zu ziehen und dort anzuzeigen! ! Aber seit der Veröffentlichung der neuen Funktionen von H5 wurde die Funktion der Drag-and-Drop-API hinzugefügt, die diese Funktion perfekt realisiert! ! !
Bewerbungsanlässe:
Laden Sie auf einer bestimmten Website ein Bild als Avatar hoch
Foto hochladen...
Neue Dateioperationsobjekte in HTML5:
Datei: stellt ein Dateiobjekt dar
FileList: Stellt ein Dateilistenobjekt im Array-Stil dar
FileReader: Wird zum Lesen von Daten aus Dateien verwendet
FileWriter: Wird zum Schreiben von Daten in Dateien verwendet
Verwandte Funktionen:
div.ondrop = function(e){var f = e.dataTransfer.files[0]; //Die per Drag & Drop gezogene Datei finden var = new FileReader( //Erstellen Sie einen Dateireader fr.readAsURLData(f); //Dateiinhalt lesen fr.onload = function(){ //Lesen abgeschlossen img.src = fr.result; //Die gelesenen Daten verwenden} }Der Code lautet wie folgt:
<span style=font-size: 18px;><!DOCTYPE html> <html> <head lang=en> <meta charset=UTF-8> <title></title> <style> #container { border: 1px solid #aaa; Randradius: 3px; Rand: 10px; </style> </head> <body> <h1>Erweiterte Kenntnisse der Drag-and-Drop-API</h1> <h3>Bitte ziehen Sie Ihr Foto in den Feldbereich unten</h3> <div id=container></ div > <script> //Abhören des Drop-Ereignisses des Dokuments – Abbrechen des Standardverhaltens: Öffnen Sie das Bild in einem neuen Fenster document.ondragover = function(e){ e.preventDefault();/Aktivieren Sie das Auslösen des Drop-Ereignisses } document.ondrop = function(e){ e.preventDefault(); //Verhindern Sie, dass das Bild in einem neuen Fenster geöffnet wird, sonst wird der Download-Vorgang trotzdem ausgeführt! ! ! } // Hören Sie sich das Drop-Ereignis von div#container an, versuchen Sie, die freigegebenen Bilddaten zu lesen und anzuzeigen. container.ondragover = function(e){ e.preventDefault( } container.ondrop = function(e){ console .log ('Der Client hat ein Bild gezogen und freigegeben...') // Das aktuelle Zielobjekt liest die im Drag & Drop-Quellobjekt gespeicherten Daten //console.log(e.dataTransfer); //Ein Problem anzeigen //console.log(e.dataTransfer.files.length); //Die Anzahl der hineingezogenen Bilder var f0 = e.dataTransfer.files[0]; /File object File //Daten aus der Datei lesen var fr = new FileReader(); //fr.readAsText(f0); //Textzeichenfolge aus der Datei lesen fr.readAsDataURL(f0); //URL-Daten aus der Datei lesen fr.onload = function(){ console.log('Lesen der Datei abgeschlossen') console.log(fr.result); var img = new Image(); ; //URL-Daten container.appendChild(img); } </script> </body> </html></span>Der Effekt ist wie folgt:
ZusammenfassenDas Obige ist eine detaillierte Erklärung der vom Herausgeber eingeführten klassischen Beispiele der HTML5-Drag-and-Drop-API. Wenn Sie Fragen haben, hinterlassen Sie mir bitte eine Nachricht und der Herausgeber wird Ihnen rechtzeitig antworten . Ich möchte mich auch bei allen für die Unterstützung der VeVb-Kampfsport-Website bedanken!