Raid on HTML5 Javascript API Extension 4 – Drag/Drop-Übersicht_HTML5-Tutorial-Tipps

Drag/Drop ist eine sehr häufige Funktion. Sie können ein Objekt greifen und an die Stelle ziehen, an der Sie es platzieren möchten. Viele Javascripte implementieren ähnliche Funktionen, beispielsweise die Drag-and-Drop-Komponente von jQueryUI. In HTML5 ist Drag & Drop zu einem Standardvorgang geworden und wird von jedem Element unterstützt. Da diese Funktion so verbreitet ist, unterstützen alle gängigen Browser diesen Vorgang.
Aktivieren des Drag-Drag-Attributs
Es ist sehr einfach, das Drag-Attribut eines Elements in „Drag-Dragable“ zu ändern, wie unten gezeigt:

Code kopieren

Der Code lautet wie folgt:

Übertragung von Daten beim Ziehen
Während des Ziehvorgangs müssen wir häufig entsprechende logische Daten übertragen, um den Konvertierungsprozess abzuschließen Für die Datenübertragung werfen wir einen Blick auf die Mitglieder:
Methodenmitglieder:

Kopieren Sie den Code

Die Der Code lautet wie folgt:

setData(format,data): Weisen Sie die gezogenen Daten dem dataTransfer-Objekt zu.

Format: ein String-Parameter, der den Typ der gezogenen Daten angibt. Der Wert dieses Parameters kann „Text“ (Texttyp) und „URL“ (URL-Typ) sein. Dieser Parameter ist von der Groß-/Kleinschreibung unabhängig, sodass die Übergabe von „text“ und „Text“ gleich ist.
Daten: Ein Variantentypparameter, der die gezogenen Daten angibt. Die Daten können Text, Bildpfade, URLs usw. sein.
Diese Funktion hat einen booleschen Rückgabewert. „true“ bedeutet, dass die Daten erfolgreich zu dataTransfer hinzugefügt wurden, „false“ bedeutet, dass die Daten nicht erfolgreich sind. Bei Bedarf können Sie über diesen Parameter entscheiden, ob bestimmte Logik weiterhin ausgeführt werden soll.

Code kopieren

Der Code lautet wie folgt:

getData(format): Get Die in dataTransfer gespeicherten Daten ziehen Daten.

Die Bedeutung des Formats ist dieselbe wie in setData und der Wert kann „Text“ (Texttyp) und „URL“ (URL-Typ) sein.

Code kopieren

Der Code lautet wie folgt:

clearData(format): entfernen die angegebenen Typdaten.

Neben den oben spezifizierbaren „Text“ (Texttyp) und „URL“ (URL-Typ) kann das Format hier auch folgende Werte annehmen: Datei-Datei, HTML- HTML-Element, Bild -Bild.
Mit dieser Methode kann der gezogene Datentyp selektiv verarbeitet werden.
Attributmitglieder:

Code kopieren

Der Code lautet wie folgt:

effectAllowed: Legt die Vorgänge fest oder ruft sie ab, die von den Daten im Datenquellenelement ausgeführt werden können.

Der Attributtyp ist string und der Wertebereich ist wie folgt:
"kopieren"-Daten kopieren
"verschieben"-Daten. Daten verschieben
"copyLink" - Daten kopieren oder verknüpfen, abhängig vom Zielobjekt.
„copyMove“ – Daten kopieren oder verschieben, abhängig vom Zielobjekt.
„linkMove“ – Daten verknüpfen oder verschieben, je nach Zielobjekt.
„alle“ – Alle Vorgänge werden unterstützt.
„none“ – Ziehen deaktivieren.
"uninitialisiert" - Standardwert, Standardverhalten übernehmen.
Beachten Sie, dass nach dem Festlegen von effectAllowed auf none das Ziehen verboten ist, die Mausform jedoch weiterhin die Form eines nicht ziehbaren Objekts anzeigt. Wenn Sie diese Mausform nicht anzeigen möchten, müssen Sie das Attribut returnValue des Fensterereignisereignisses festlegen zu falsch.

Code kopierenDer Code lautet wie folgt:

dropEffect: Setze oder erhalte die Ziel ziehen Zulässige Vorgänge für die .und verwandte Mausformen.


Der Attributtyp ist eine Zeichenfolge und der Wertebereich ist wie folgt:
„Kopieren“ – die Maus wird beim Kopieren als Form angezeigt;
„Link“ – die Maus wird angezeigt wird als verbundene Form angezeigt;
„bewegen“ – Die Maus erscheint als sich bewegende Form.
„none“ (Standard) – Die Maus erscheint als Form ohne Ziehen.
effectAllowed gibt die von der Datenquelle unterstützten Vorgänge an und wird daher normalerweise im ondragstart-Ereignis angegeben. dropEffect gibt die vom Drag-and-Drop-Ziel unterstützten Vorgänge an. In Verbindung mit effectAllowed wird es daher normalerweise in ondragenter-, ondragover- und ondrop-Ereignissen auf dem Drag-Ziel verwendet.

Code kopieren

Der Code lautet wie folgt:

Dateien: Gibt die Liste der zurück Dateiliste der gezogenen Dateien.
Typen: Liste der in ondragstart gesendeten Datentypen (gezogene Daten).

Das Vorhandensein des dataTransfer-Objekts ermöglicht die Übertragung logischer Daten zwischen der gezogenen Datenquelle und dem Zielelement. Normalerweise verwenden wir die setData-Methode, um Daten im Ondragstart-Ereignis des Datenquellenelements bereitzustellen, und verwenden dann die getData-Methode, um die Daten im Zielelement abzurufen.
Während des Ziehens ausgelöste Ereignisse
Die folgenden Ereignisse treten während eines Ziehens auf. Grundsätzlich ist die auslösende Reihenfolge der Ereignisse die folgende:

Code kopieren

Der Code lautet wie folgt:

Dragstart: Wird ausgelöst, wenn das Ziehen des Elements beginnt. Dieses Ereignis Das Objekt besteht aus Drag-and-Drop-Elementen.
Ziehen: Wird ausgelöst, wenn ein Element gezogen wird. Dieses Ereignisobjekt ist das gezogene Element.
dragenter: Wird ausgelöst, wenn ein Drag-Element in das Zielelement eintritt. Dieses Ereignisobjekt ist das Zielelement.
Dragover: Wird ausgelöst, wenn ein Element auf das Zielelement gezogen und verschoben wird. Dieses Ereignisobjekt ist das Zielelement.
dragleave: Wird ausgelöst, wenn ein Element vom Zielelement weggezogen wird. Dieses Ereignisobjekt ist das Zielelement.
drop: Wird ausgelöst, wenn das gezogene Element innerhalb des Zielelements platziert wird. Dieses Ereignisobjekt ist das Zielelement.
dragend: Wird nach dem Ablegen ausgelöst, das heißt, wenn das Ziehen abgeschlossen ist. Dieses Ereignisobjekt ist das gezogene Element.

Grundsätzlich werden die Ereignisparameter des Ereignisses in den relevanten Elementen übergeben, die leicht geändert werden können. Hier müssen wir nicht jedes Ereignis abwickeln, sondern normalerweise nur die Hauptereignisse miteinander verbinden.
Drag start-ondragstart event
Die von diesem Ereignis übergebenen Parameter enthalten sehr umfangreiche Informationen, aus denen das gezogene Element (event.Target) leicht abgerufen werden kann; Sie können die gezogenen Daten festlegen (event.dataTransfer.setData); so können Sie die Logik hinter dem Ziehen einfach implementieren (natürlich können Sie beim Binden auch andere Parameter übergeben).
Während des Ziehvorgangs – Ereignisse ondrag, ondragover, ondragenter und ondragleave
Das Objekt des Ereignisses ondrag ist das gezogene Element, und normalerweise wird dieses Ereignis seltener behandelt. Das ondragenter-Ereignis tritt ein, wenn der Drag in das aktuelle Element eintritt, das ondragleave-Ereignis tritt ein, wenn der Drag das aktuelle Element verlässt, und das ondragover-Ereignis tritt auf, wenn sich der Drag innerhalb des aktuellen Elements bewegt.
Sie müssen hier nur auf eines achten, da der Browser standardmäßig das Löschen von Elementen verbietet. Um das Löschen von Elementen zu ermöglichen, müssen Sie in dieser Funktion false zurückgeben oder event.preventDefault aufrufen ()-Methode. Wie im Beispiel unten gezeigt.
Drag End-OnDrop, Ondragend Event
Wenn die ziehbaren Daten abgelegt werden, wird das Drop-Ereignis ausgelöst. Nachdem der Drop abgeschlossen ist, wird das Dragend-Ereignis ausgelöst, und dieses Ereignis wird relativ selten verwendet.
Sehen Sie sich ein einfaches Beispiel an:

Kopieren Sie den Code

Der Code lautet wie folgt:

functionlowDrop(ev){
ev. präventDefault();
}
functiondrag(ev){
ev.dataTransfer.setData("Text",ev.target.id>}
functiondrop(ev){
vardata=ev .dataTransfer.getData("Text");
ev.target.appendChild(document.getElementById(data)}



< ;imgid="drag1"src="img_logo.gif"draggable="true"ondragstart="drag(event)"width="336"height="69"/> ;

Datei ziehen
Im obigen Beispiel wurden verschiedene Methoden und Attribute von dataTransfer verwendet. Schauen wir uns eine weitere interessante Anwendung im Internet an: Ziehen Sie ein Bild per Drag & Drop auf die Webseite und zeigen Sie es dann an die Webseite. Diese Anwendung verwendet das Dateiattribut von dataTransfer.

Code kopieren

Der Code lautet wie folgt:

🎜>< ;html>

#section{Schriftfamilie: „Georgia“, „Microsoft Yahei“, „中文中宋“;}
.container{display:inline-block;min-height:200px;min-width:360px; color: #f30;padding:30px;border:3pxsolid#ddd;-moz-border-radius:10px;-webkit-border-radius:10px;border-radius:10px;}
.preview{max-width: 360px; }
#files-list{position:absolute;top:0;left:500px;}
#list{width:460px;}
#list.preview{max-width:250px;}
#listp{color:#888;font-size:12px;}
#list.green{color:#09c;}

< ;body>

Ziehen Sie Ihr Bild in den Container unten:

Container">

Die Dateien, die hineingezogen wurden:

< ; ulid="list">

if(window.FileReader){
varlist = document.getElementById('list'),
cnt=document.getElementById('container');
//Bestimmen Sie, ob es sich um ein Bild handelt
functionisImage(type){
switch(type) {
case'image/jpeg':
case'image/png':
case'image/gif':
case'image/bmp':
case'image/jpg' :
returntrue;
default:
returnfalse;}
}
//Handhabe die Drag-and-Drop-Dateiliste
functionhandleFileSelect(evt){
evt.stopPropagation ();
evt.preventDefault();
varfiles=evt.dataTransfer.files;
for(vari=0,f;f=files[i];i ){
vart=f .type?f.type :'n/a',
reader=newFileReader(),
looks=function(f,img){
list.innerHTML ='

' f.name '< ;/strong>(' t
')-' f.size 'bytes

' img '

'; img;
} ,
isImg=isImage(t),
img;//Das verarbeitete Bild
if(isImg){
reader.onload=(function(theFile) {
returnfunction (e){
img=''; sieht aus (theFile,img );
})(f)
reader.readAsDataURL(f); ))o“, Was Sie eingesandt haben, ist kein Bild! ! ';
looks(f,img);
}
}
//Verarbeiten Sie den Einfüge- und Zieheffekt
functionhandleDragEnter(evt){this.setAttribute('style' , 'border-style:dashed;');}
functionhandleDragLeave(evt){this.setAttribute('style','');}
//Verarbeiten von Datei-Drag-In-Ereignissen, um Browser-Standardereignisse zu verhindern verursacht eine Umleitung von
functionhandleDragOver(evt){
evt.stopPropagation();
evt.preventDefault();
cnt.addEventListener('dragenter',handleDragEnter,false); 🎜>cnt.addEventListener('dragover',handleDragOver,false);
cnt.addEventListener('drop',handleFileSelect,false);
cnt.addEventListener('dragleave',handleDragLeave,false); }else{
document.getElementById('section').innerHTML='Dein Browser unterstützt es nicht, Klassenkamerad'; >


Dieses Beispiel verwendet die Dateilese-API in HTML5: Dieses Objekt stellt die folgenden asynchronen Methoden zum Lesen von Dateien bereit:
1.
Lesen Sie die Datei im Binärmodus, das Ergebnisattribut enthält das Binärformat einer Datei
2.FileReader.readAsText(fileBlob,opt_encoding)
Lesen Sie die Datei im Textmodus, das Ergebnisattribut enthält das Textformat einer Datei, und der Standarddekodierungsparameter ist „utf-8“.
3.FileReader.readAsDataURL(file)
Das Ergebnis des Lesens einer Datei im URL-Format enthält das DataURL-Format einer Datei (Bilder werden normalerweise auf diese Weise verwendet).
Wenn die Datei mit der oben genannten Methode gelesen wird, werden die folgenden Ereignisse ausgelöst:





Kopieren Sie den Code


Der Code lautet wie folgt:


onloadstart, onprogress, onabort, onerror, onload, onloadend


Diese Ereignisse sind sehr einfach. Schließen Sie sie einfach bei Bedarf an. Schauen Sie sich das Codebeispiel unten an:

Kopieren Sie den Code

Der Code lautet wie folgt:

functionstartRead() {
//obtaininputelementthroughDOM
varfile=document.getElementById('file').files[0];
if(file){
getAsText(file); }
}
functiongetAsText(readFile){
varreader=newFileReader();
//ReadfileintomemoryasUTF-16
reader.readAsText(readFile,"UTF-16"); /Handleprogress,success, anderrors
reader.onprogress=updateProgress;
reader.onload=loaded;
reader.onerror=errorHandler;
functionupdateProgress(evt){
if( evt.lengthComputable){
//evt.loadedandevt.totalareProgressEventproperties
varloaded=(evt.loaded/evt.total);
if(loaded<1){
//Increasetheprogbarlength
/ /style.width= (loaded*200) "px";
}
}
}
functionloaded(evt){
//Obtainthereadfiledata
varfileString=evt.target.result ;
/ /HandleUTF-16filedump
if(utils.regexp.isChinese(fileString)){
//ChineseCharacters Namevalidation
}
else{
//runothercharsettest
}
// xhr.send(fileString)
}
functionerrorHandler(evt){
if(evt.target.error.name=="NotReadableErr"){
//Die Datei konnte nicht gelesen werden
}
}


Eine kurze Erklärung hier: Gewöhnliche Dateidownloads verwenden die window.open-Methode, zum Beispiel:

Code kopieren

Der Code lautet wie folgt:

window.open('http://aaa.bbbb.com/ccc.rar','_blank' )

Praktische Referenz:
Offizielle Dokumentation:
http://www.w3schools.com/html5/Eine gute Tutorial-Website: http://html5.phphubei.com/html5/features/DrapAndDrop/MSDN-Hilfe: http://msdn.microsoft.com/en-us/library/ms535861( v=vs.85 ).aspx

Details zum Ziehen und Ablegen von Dateien:http://www.html5rocks.com/zh/tutorials/file/dndfiles/
Ziehen und Ablegen von Dateien Ablegen und Hochladen:http://www.chinaz.com/design/2010/0909/131984.shtml
Vollständiges Beispiel für das Hochladen von Dateien per Drag-and-Drop:http://www. cnblogs.com/liaofeng/archive/ 2011/05/18/2049928.html
Beispiel für den Dateidownload:http://hi.baidu.com/guo_biru/item/2d7201c012b6debd0c0a7b05
window.open-Strategie:http://www.cnblogs.com/liulf/archive/2010/03/01/1675511.html
window.open-Parameter: http:/ /www.koyoz.com/blog /?action=show&id=176