JavaScript -API -Erweiterung 4 des RAID HTML5 - Drag/Drop -Übersicht

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.

Es 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"/>

Wä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.

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.

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.

Das 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.

Die 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).

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.

Wenn 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>

Das 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')

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