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:
Ü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:
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.
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.
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:
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.
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.
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:
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:
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.
🎜>< ;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'; >
