Drag/Drop ist eine sehr häufige Funktion. Sie können ein Objekt schnappen und es in den Bereich ziehen, den Sie platzieren möchten. Viele JavaScripts implementieren verwandte Funktionen in ähnlicher Weise, wie die Draganddrop -Komponente von Jqueryui. In HTML5 wird Drag Drop zum Standardbetrieb und jedes Element unterstützt es. Da diese Funktion so häufig ist, unterstützen alle Mainstream -Browser diesen Vorgang.
Aktivieren Sie die MagebriebseigenschaftEs ist sehr einfach. Ändern Sie einfach das Drag -Attribut eines Elements in Draggable, und dieses Element unterstützt das Ziehen, wie unten gezeigt:
<imgdraggable = "true"/>
Daten beim Ziehen übergebenWährend des Zoging -Prozesses müssen wir häufig entsprechende logische Daten übergeben, um den Konvertierungsprozess abzuschließen. Hier verwenden wir hauptsächlich das DataTransfer -Objekt für die Datenübertragung. Schauen wir uns zuerst die Mitglieder an:
Methodenmitglieder:
SetData (Format, Daten): Weisen Sie dem DataTransfer -Objekt die gezogenen Daten zu.
Format: Ein String -Parameter, der die Art der Datentypen angibt. Die Werte dieses Parameters können Text (Texttyp) und URL (URL -Typ) sein. Dieser Parameter ist fallsunabhängig, so dass der Text mit Text übereinstimmt.
Daten: Ein Parameter vom Variantenstyp, der die zugezogenen Daten angibt. Die Daten können Text, Bildpfad, URL usw. sein.
Diese Funktion hat einen Rückgabewert des Booleschen Typs. Richtig bedeutet, dass die Daten dem Datatransfer erfolgreich hinzugefügt werden, und falsch bedeutet, dass sie nicht erfolgreich sind. Bei Bedarf kann dieser Parameter verwendet werden, um zu entscheiden, ob eine Logik fortgesetzt werden soll.
GetData (Format): Holen Sie sich die in DataTransfer gespeicherten Drag -Daten.
Format bedeutet das Gleiche wie in SetData, und die Werte können Text (Texttyp) und URL (URL -Typ) sein.
ClearData (Format): Entfernt Daten des angegebenen Typs.
Zusätzlich zum Text (Texttyp) und der URL (URL-Typ), die oben angegeben werden können, kann das Format hier auch die folgenden Werte annehmen: Dateifile, HTML-HTML-Element, Bildbild.
Diese Methode kann verwendet werden, um gezogene Datentypen selektiv zu verarbeiten.
Attributmitglieder :Effectalowed: Setzt oder erhält die Operation, die Daten im Datenquellelement ausführen können.
Der Attributtyp ist eine Zeichenfolge, und der Wertebereich lautet wie folgt:
Kopierdaten.
Link-Link-Daten.
Move-Mobile-Daten
COPYLINK - Kopieren oder Verbindungsdaten, bestimmt vom Zielobjekt.
COPYMOVE - Kopieren oder Verschieben von Daten, bestimmt vom Zielobjekt.
LinkMove - Link- oder Verschieben von Daten, bestimmt vom Zielobjekt.
All-All-Operationen werden unterstützt.
Keine Drap ist verboten.
Nicht initialisiert - Standardwert, das Standardverhalten annimmt.
Beachten Sie, dass nach dem Einstellen von Effectalown nicht das Ziehen verboten ist, die Mausform jedoch immer noch die Form eines Objekts zeigt, das nicht gezogen werden kann. Wenn Sie diese Mausform nicht anzeigen möchten, müssen Sie das Eigenschaftsrücklauf des Ereignisereignisses des Fensters auf False einstellen.
DROPEffect: Sätze oder erhalten Vorgänge auf dem gezogenen Ziel und der zugehörigen Mausform.
Der Attributtyp ist eine Zeichenfolge, und der Wertebereich lautet wie folgt :Kopieren Sie die Form der Maus, wenn sie als Kopie erscheint;
Link-die Maus wird als Form der Verbindung angezeigt;
Bewegung-Die Maus erscheint als bewegliche Form.
Keine (Standard) - Die Maus erscheint als Form ohne Ziehen.
EffectAllowed gibt Operationen an, die von der Datenquelle unterstützt werden, daher wird sie normalerweise im ONDRAGSTART -Ereignis angegeben. Dropeffect gibt die Aktionen an, die durch Ziehen des Ziels unterstützt werden. Daher wird es normalerweise bei Ereignissen wie Ondragenter, ONDRAGOVER und ONDROP auf dem gedrückten Ziel verwendet.
Dateien: Gibt die Liste der Filelisten der gezogenen Dateien zurück.
Typen: Eine Liste von Datentypen, die in ONDRAGREGSTART gesendet wurden (Dragdaten).
Das Vorhandensein eines DataTransfer -Objekts ermöglicht es, logische Daten zwischen der gezogenen Datenquelle und dem Zielelement zu übergeben. Normalerweise verwenden wir die SetData -Methode, um Daten im ONDRAGSTART -Ereignis des Datenquellelements bereitzustellen, und dann verwenden wir im Zielelement die GetData -Methode, um Daten zu erhalten.
Ereignisse, die während des Ziehens ausgelöst wurdenDas Folgende ist das Ereignis, das beim Ziehen und Abnehmen auftritt. Grundsätzlich ist die Auslöserreihenfolge der Ereignisse die folgende Reihenfolge:
DragStart: Ausgelöst, wenn das zu schleppende Element zu ziehen beginnt. Dieses Ereignisobjekt ist das gezogene Element.
Ziehen: Ausgelöst, wenn ein Element gezogen wird, ist dieses Ereignisobjekt das geschaltete Element.
Dragenter: Ausgelöst, wenn Sie ein Element in das Zielelement ziehen. Dieses Ereignisobjekt ist das Zielelement.
Dragover: Ausgelöst, wenn Sie ein Element ziehen, um das Zielelement zu bewegen. Dieses Ereignisobjekt ist das Zielelement.
Dragleave: Ausgelöst, wenn Sie ein Element vom Zielelement wegziehen. Dieses Ereignisobjekt ist das Zielelement.
DROP: Ausgelöst, wenn das gezogene Element im Zielelement platziert ist. Dieses Ereignisobjekt ist das Zielelement.
Dragend: Ausgelöst nach dem Drop, der ausgelöst wird, wenn der Widerstand abgeschlossen ist. Dieses Ereignisobjekt ist ein geschaltetes Element.
Grundsätzlich wird das Ereignisparameterereignis in verwandten Elementen übergeben, die leicht geändert werden können. Hier müssen wir nicht jedes Ereignis bewältigen, normalerweise müssen wir nur ein paar Hauptveranstaltungen anschließen.
Dragstart -EreignisDie aus diesem Ereignis übergebenen Parameter enthalten viele Informationen, und Sie können die gezogenen Elemente (Ereignis.Target) problemlos erhalten. Sie können die gezogenen Daten festlegen (Ereignis.Datatransfer.setData); So können Sie die Logik hinter dem Widerstand einfach implementieren (natürlich können Sie auch andere Parameter übergeben, wenn Sie binden).
Während des Ziehens - Ondrag-, ONDRAGOVER-, ONDRAGERN- und ONDRAGLEAVE -Ereignisse Das Objekt des ONDRAG -Ereignisses ist ein Dragelement, und dieses Ereignis wird normalerweise weniger häufig behandelt. Das Ondragenter -Ereignis tritt beim Ziehen in das aktuelle Element auf, das ONDRAGLEAVE -Ereignis tritt beim Ausziehen aus dem aktuellen Element auf, und das ONDRAGOVER -Ereignis tritt beim Ziehen im Stromelement auf.Nur eine Sache, die hier zu beachten ist, ist, dass der Browser standardmäßig Elemente fallen lässt. Damit Elemente fallen, müssen Sie in dieser Funktion falsch zurückgeben oder das Ereignis aufrufen. Wie im folgenden Beispiel gezeigt.
Drag End - ONDROP, ONDRAGEND EventWenn draggierbare Daten fallen gelassen werden, wird das Drop -Ereignis ausgelöst. Nach dem Ende des Tropfens wird das Dragend -Ereignis ausgelöst, und dieses Ereignis wird relativ weniger verwendet.
Schauen wir uns ein einfaches Beispiel an:
<! DocTypehtml>
<html>
<kopf>
<scriptType = "text/javaScript">
functionallowdrop (ev) {
Ev.PreventDefault ();
}
functionDrag (ev) {
ev.datatransfer.setData ("text", ev.target.id);
}
FunctionDrop (ev) {
vardata = ev.datatransfer.getData ("text");
ev.target.appendchild (document.getElementById (data));
Ev.PreventDefault ();
}
</script>
</head>
<body>
<divid = "div1" ondrop = "Drop (Ereignis)" ONDRAGOVER = "ERGEBNUNG (Ereignis)"> </div>
<imgid = "drag1" src = "img_logo.gif" driggable = "true" ondagstart = "Drag (Ereignis)" width = "336" height = "69"/>
</body>
</html>
Ziehen Sie die Datei ab und ziehen Sie die DateiDas obige Beispiel hat verschiedene Methoden und Eigenschaften von Datatransfer verwendet. Schauen wir uns eine weitere interessante Anwendung im Internet an: Drag und fallen Sie ein Bild auf der Webseite und zeigen Sie es dann auf der Webseite an. Diese Anwendung verwendet die Dateieneigenschaft von DataTransfer.
<! DocTypehtml>
<html>
<kopf>
<metacharset = "utf-8">
<title> html5 Drag & Drop -Datei </title>
<Styles>
#Sektion {Schriftfamilie: "Georgia", "Microsoft Yahei", "Chinese Song";}
.Container {Display: Inline-Block; min-hohe: 200px; min-width: 360px; Farbe:#f30; padding: 30px; border: 3pxsolid#ddd; -moz-border-radius: 10px;
.preview {max-Width: 360px;}
#Dateienliste {Position: absolut; oben: 0; links: 500px;}
#List {width: 460px;}
#list.preview {max-Width: 250px;}
#Listp {color:#888; Schriftgröße: 12px;}
#list.green {color:#09c;}
</style>
</head>
<body>
<divid = "section">
<P> Ziehen Sie Ihr Bild in den Container unten: </p>
<divid = "container" class = "container">
</div>
<divid = "Dateienliste">
<p> Dateien, die in: </p> gezogen wurden
<ulid = "list"> </ul>
</div>
</div>
<Script>
if (window.Filereader) {
varlist = document.getElementById ('Liste'),
cnt = document.getElementById ('Container');
// beurteilen, ob das Bild ist
functionImage (Typ) {
Switch (Typ) {
case'image/jpeg ':
case'image/png ':
case'image/gif ':
case'image/bmp ':
case'image/jpg ':
returnTrue;
Standard:
returnfalse;
}
}
// Liste der Drag & Drop -Datei handhaben
FunktionsHandleFileSelect (evt) {
evt.StopPropagation ();
evt.preventDefault ();
varfiles = evt.datatransfer.files;
für (vari = 0, f; f = Dateien [i]; i ++) {
vart = f.type? f.type: 'n/a',,
Reader = newFileArerader (),
Aussehen = Funktion (f, img) {
list.innerhtml+= '<li> <strong>'+F.Name+'</strong> ('+t+
')-'+f.size+'bytes <p>'+img+'</p> </li>';
cnt.innerhtml = img;
},
ISIMG = ISIMAGE (T),
img;
// Verarbeitung der erhaltenen Bilder
if (isimg) {
Reader.onload = (Funktion (theFile) {
returnfunction (e) {
img = '<imgclass = "preview" src = "'+e.target.result+'" title = "'+thefile.name+'"/>';
sieht aus (thefile, img);
};
})(F)
Reader.ReadasDataurl (f);
}anders{
IMG = '"O ((> ω <)), was Sie gesendet haben, ist kein Bild! ! ';
sieht aus (f, img);
}
}
}
// Behandeln Sie die Einfügung und ziehen Sie den Effekt aus
FunctionHandleDRagenter (evt) {this.setAttribute ('Style', 'Border-Stil: gestrichelt;');};
FunctionHandleDRagleave (evt) {this.setAttribute ('style', '');};
// Dateischleppereignisse verarbeiten, um die durch Standard -Ereignisse des Browsers verursachte Umleitung zu verhindern
FunktionshandleDRagover (evt) {
evt.StopPropagation ();
evt.preventDefault ();
}
cnt.addeventListener ('dragenter', HandledRagenter, falsch);
cnt.addeventListener ('Dragover', HandledRagover, Falsch);
Cnt.AdDeVentListener ('Drop', HandleFileSelect, False);
cnt.addeventListener ('Dragleave', HandledRagleave, False);
}anders{
document.getElementById ('Abschnitt'). InnerHtml = 'Ihr Browser unterstützt es nicht, Klassenkamerad';
}
</script>
</body>
</html>
In diesem Beispiel wird die Dateiliese -API in HTML5 verwendet: das FileReader -Objekt; Dieses Objekt bietet die folgende asynchrone Methode zum Lesen von Dateien:
1.FileReader.ReadasBinaryString (FileBlob)
Lesen Sie die Datei im Binärmodus. Das Ergebnisattribut enthält das binäre Format einer Datei
2.FileReader.Readastext (Dateiblob, opt_encoding)
Lesen Sie die Datei im Textmodus. Das Ergebnisattribut enthält das Textformat einer Datei. Der Standard-Dekodierungsparameter ist UTF-8.
3.FileReader.readasDataurl (Datei)
Das Lesen des Datei -Ergebniss in URL -Formular enthält das DataURL -Format einer Datei (Bilder sind normalerweise auf diese Weise).
Wenn die Datei unter Verwendung der obigen Methode gelesen wird, werden die folgenden Ereignisse ausgelöst:
OnloadStart, Onprogress, Onabort, OnError, Onload, Onloadend
Diese Ereignisse sind sehr einfach, schließen Sie sich bei Bedarf einfach an. Siehe das folgende Codebeispiel:
functionStarTread () {
//
varfile = document.getElementById ('Datei'). Dateien [0];
if (Datei) {
GetAsxt (Datei);
}
}
functionGetastext (ReadFile) {
varreader = newFileArader ();
// ReadFileIntomoryasutf-16
Reader.Readastext (ReadFile, "UTF-16");
// Handlungsprogramm, Erfolg, Anders
reader.onprogress = updateProgress;
reader.onload = geladen;
reader.onError = errorHandler;
}
FunctionUpdateProgress (evt) {
if (evt.length computable) {
//evt.loadedandevt.totalareProgressEventProperties
varLoded = (evt.loaded/evt.total);
if (geladen <1) {
// Erhöhungsprogbarlength
//style.width=(Loaded*200)+"px ";
}
}
}
funktionsgeladen (evt) {
// AnthereadFiledata
varFilestring = evt.target.Result;
// HandleUTF-16Filedump
if (utils.regexp.ischinese (filestring)) {
// Chinesecharacters+NameValidation
}
anders{
// Runothercharsettetest
}
//xhr.send(Filestring)
}
FunctionErrorHandler (evt) {
if (evt.target.Error.name == "NotReadableerr") {
// Die Datei könnte benachrichtigen
}
}
Lassen Sie mich hier kurz darüber sprechen.
window.open ('http://aaa.bbb.com/ccc.rar''_blank')
Praktische Referenz: Offizielles Dokument: http://www.w3schools.com/html5/Eine gute Tutorial -Website: http://html5.phphube.com/html5/features/drapanddrop/
Msdn help: http://msdn.microsoft.com/en-us/library/ms535861(v=vs.85).aspx
Detaillierte Beschreibung der Datei Drag und Drop: http://www.html5rocks.com/zh/tutorials/file/dndfiles/
Ziehen und hochladen die Datei: http://www.chinaz.com/design/2010/0909/131984.shtml
Komplettes Beispiel für Datei Drag & Drop Upload: http://www.vevb.com/liaofeng/archive/2011/05/18/2049928.html
Beispiel für den Datei -Download: http://hi.baidu.com/guo_biru/item/2d7201c012b6debd0c0a7b05
window.openhandbuch: http://www.vevb.com/liulf/archive/2010/03/01/1675511.html
window.open Parameter: http://www.koyoz.com/blog/?action=show&id=176