Detaillierte Erklärung zu Drag-Time und Drag-Case in JavaScript

Beim Ziehen hält der Benutzer die Maustaste auf einem Objekt gedrückt, zieht es an eine andere Stelle und lässt die Maustaste anschließend los, um das Objekt dort abzulegen.

Es gibt verschiedene Objekttypen, die gezogen werden können, darunter Elementknoten, Bilder, Links, ausgewählter Text usw. Auf einer Webseite kann mit Ausnahme der Elementknoten, die standardmäßig nicht gezogen werden können, alles andere (Bilder, Links, ausgewählter Text) direkt gezogen werden. Um einen Elementknoten verschiebbar zu machen, setzen Sie das draggable -Attribut des Knotens auf true .

<div ziehbar="true">
  Dieser Bereich kann gezogen werden</div>

Das draggable -Attribut kann auf jedem Elementknoten verwendet werden, aber Bilder ( <img> ) und Links ( <a> ) können ohne dieses Attribut gezogen werden. Bei ihnen wird dieses Attribut bei Verwendung häufig auf false gesetzt, um das Ziehen dieser beiden Elemente zu verhindern.

Beachten Sie, dass Sie den Text oder die untergeordneten Knoten innerhalb des Knotens nicht mehr mit der Maus auswählen können, sobald die draggable -Eigenschaft eines Elementknotens auf true gesetzt ist.

Beim Ziehen eines Elementknotens oder ausgewählten Textes werden fortlaufend Ziehereignisse ausgelöst, darunter die folgenden Ereignisse.

• drag : Während des Ziehvorgangs wird es kontinuierlich (alle paar hundert Millisekunden) am gezogenen Knoten ausgelöst.
• dragstart : Wenn der Benutzer mit dem Ziehen beginnt, wird es am gezogenen Knoten ausgelöst. target Zielattribut dieses Ereignisses ist der gezogene Knoten. Normalerweise sollten die gezogenen Daten in der Abhörfunktion dieses Ereignisses angegeben werden.
• dragend : Wird am gezogenen Knoten ausgelöst, wenn das Ziehen beendet wird (Maustaste loslassen oder ESC-Taste drücken). target Zielattribut dieses Ereignisses ist der gezogene Knoten. Es wird auf demselben Knoten ausgelöst wie dragstart -Ereignis. Unabhängig davon, ob das Ziehen Fenster überschreitet oder auf halbem Weg abgebrochen wird, wird dragend -Ereignis immer ausgelöst.
• dragenter : Beim Ziehen in den aktuellen Knoten wird es einmal auf dem aktuellen Knoten ausgelöst und target Zielattribut des Ereignisses ist der aktuelle Knoten. Normalerweise sollten Sie in der Abhörfunktion dieses Ereignisses angeben, ob das Ablegen der gezogenen Daten auf dem aktuellen Knoten zulässig sein soll. Wenn der aktuelle Knoten keine Listener-Funktion für das Ereignis hat oder die Listener-Funktion keine Operation ausführt, bedeutet dies, dass am aktuellen Knoten keine Daten gelöscht werden dürfen. Die optische Anzeige des Ziehens in den aktuellen Knoten wird ebenfalls in der Abhörfunktion dieses Ereignisses eingestellt.
• dragover : Beim Ziehen über den aktuellen Knoten wird es kontinuierlich auf dem aktuellen Knoten ausgelöst (im Abstand von einigen hundert Millisekunden) und target Zielattribut des Ereignisses ist der aktuelle Knoten. Der Unterschied zwischen diesem Ereignis und dragenter -Ereignis besteht darin, dass dragenter -Ereignis beim Betreten des Knotens ausgelöst wird und dragover -Ereignis dann weiterhin ausgelöst wird, solange der Knoten nicht verlassen wird.
• dragleave : Wenn die Drag-Operation den aktuellen Knotenbereich verlässt, wird sie auf dem aktuellen Knoten ausgelöst. target Zielattribut dieses Ereignisses ist der aktuelle Knoten. Wenn Sie die Drag & Drop-Operation auf dem aktuellen Knoten visuell anzeigen möchten, legen Sie sie in der Listener-Funktion dieses Ereignisses fest.
• drop : Wird am Zielknoten ausgelöst, wenn der gezogene Knoten oder der ausgewählte Text am Zielknoten freigegeben wird. Beachten Sie, dass dieses Ereignis nicht ausgelöst wird, wenn der aktuelle Knoten drop nicht zulässt, auch wenn Sie die Maustaste über dem Knoten loslassen. Wenn der Benutzer die ESC-Taste drückt, um den Vorgang abzubrechen, wird das Ereignis nicht ausgelöst. Die Abhörfunktion dieses Ereignisses ist für das Abrufen der gezogenen Daten und die Durchführung der entsprechenden Verarbeitung verantwortlich.

Das folgende Beispiel zeigt, wie die Hintergrundfarbe des gezogenen Knotens dynamisch geändert wird.

div.addEventListener('dragstart', Funktion (e) {
  dieser.Stil.Hintergrundfarbe = "rot";
}, FALSCH);
 
div.addEventListener('dragend', Funktion (e) {
  this.style.backgroundColor = "grün";
}, FALSCH);

Wenn im obigen Code div Knoten gezogen wird, wird die Hintergrundfarbe rot und wechselt nach Beendigung des Ziehens wieder zu grün.

Das folgende Beispiel zeigt, wie ein Knoten von seinem aktuellen übergeordneten Knoten zu einem anderen übergeordneten Knoten gezogen wird.

/* Der HTML-Code lautet wie folgt <div class="dropzone">
   <div id="ziehbar" ziehbar="true">
     Dieser Knoten kann gezogen werden</div>
 </div>
 <div Klasse = "dropzone"></div>
 <div Klasse = "dropzone"></div>
 <div Klasse = "dropzone"></div>
*/
 
//Gezogener Knoten var dragged;
 
document.addEventListener('dragstart', Funktion (Ereignis) {
  // Den gezogenen Knoten speichern dragged = event.target;
  // Die Hintergrundfarbe des gezogenen Knotens wird transparent event.target.style.opacity = 0,5;
}, FALSCH);
 
document.addEventListener('dragend', Funktion (Ereignis) {
  // Die Hintergrundfarbe des gezogenen Knotens wird auf den Normalwert zurückgesetzt event.target.style.opacity = '';
}, FALSCH);
 
document.addEventListener('dragover', Funktion (Ereignis) {
  // Verhindern Sie, dass der Drag-Effekt zurückgesetzt wird und ermöglichen Sie, dass der gezogene Knoten im Zielknoten platziert wird. event.preventDefault();
}, FALSCH);
 
document.addEventListener('dragenter', Funktion (Ereignis) {
  // Die Hintergrundfarbe des Zielknotens ändert sich zu violett // Da das Ereignis aufsteigt, muss der Knoten gefiltert werden, wenn (event.target.className === 'dropzone') {
    event.target.style.background = "lila";
  }
}, FALSCH);
 
document.addEventListener('dragleave', Funktion( Ereignis ) {
  // Die Hintergrundfarbe des Zielknotens wird wiederhergestellt, wenn (event.target.className === 'dropzone') {
    event.target.style.background = '';
  }
}, FALSCH);
 
document.addEventListener('drop', Funktion( Ereignis ) {
  // Verhindern des Standardverhaltens des Ereignisses (beispielsweise können Links auf bestimmten Elementknoten geöffnet werden),
  event.preventDefault();
  wenn (Ereignis.Ziel.Klassenname === 'Dropzone') {
    // Hintergrundfarbe des Zielknotens wiederherstellen event.target.style.background = '';
    //Den gezogenen Knoten in den Zielknoten einfügen dragged.parentNode.removeChild(dragged);
    event.target.appendChild( gezogen );
  }
}, FALSCH);

Bei Drag-Events sind mehrere Punkte zu beachten.

• Der Ziehvorgang löst lediglich die oben genannten Ziehereignisse aus. Obwohl sich die Maus bewegt, werden die Mausereignisse nicht ausgelöst.
• Das Ziehen einer Datei vom Betriebssystem in den Browser löst dragstart und dragend nicht aus.
• Die Listener-Funktion dragenter und dragover wird verwendet, um die gezogenen Daten abzurufen (d. h., um das Ablegen des gezogenen Elements zu ermöglichen). Da sich die meisten Bereiche einer Webseite nicht als Zielknoten zum Ablegen gezogener Elemente eignen, ist in der Standardeinstellung für diese beiden Ereignisse festgelegt, dass der aktuelle Knoten das gezogene Element nicht annehmen darf. Wenn Sie möchten, dass die Daten auf dem Zielknoten gelöscht werden, müssen Sie zunächst das Standardverhalten dieser beiden Ereignisse verhindern.

<div ondragover="return false">
<div ondragover="event.preventDefault()">

Wenn Sie im obigen Code das Drag-Ereignis nicht abbrechen oder das Standardverhalten verhindern, können Sie den gezogenen Knoten nicht auf div Knoten ablegen.

DragEvent-Schnittstelle

Alle Drag-Ereignisse erben die DragEvent -Schnittstelle, die wiederum die MouseEvent -Schnittstelle und Event Schnittstelle erbt.

Der Browser stellt nativ einen DragEvent() Konstruktor bereit, um Instanzobjekte von Drag-Ereignissen zu generieren.

neues DragEvent(Typ, Optionen)

DragEvent() -Konstruktor akzeptiert zwei Parameter. Der erste Parameter ist eine Zeichenfolge, die den Ereignistyp angibt. Dieser Parameter ist erforderlich. Der zweite Parameter ist das Ereigniskonfigurationsobjekt, mit dem die Eigenschaften des Ereignisses festgelegt werden. Dieser Parameter ist optional. Zusätzlich zur Annahme der Konfigurationseigenschaften der Schnittstelle MouseEvent und der Schnittstelle Event kann das Konfigurationsobjekt auch dataTransfer entweder auf null oder auf eine Instanz DataTransfer setzen.

Das DataTransfer Instanzobjekt wird zum Lesen und Schreiben von Daten verwendet, die im Drag-Ereignis übertragen werden. Einzelheiten finden Sie weiter unten im Abschnitt „DataTransfer-Schnittstelle“.

Übersicht über die DataTransfer-Schnittstelle

Alle Instanzen von Drag-Events verfügen über eine DragEvent.dataTransfer Eigenschaft, die zum Lesen und Schreiben der zu übertragenden Daten verwendet wird. Der Wert dieser Eigenschaft ist eine Instanz der DataTransfer Schnittstelle.

Der Browser stellt nativ einen DataTransfer() Konstruktor bereit, um DataTransfer Instanzobjekt zu generieren.

var dataTrans = neuer DataTransfer();

DataTransfer() -Konstruktor akzeptiert keine Argumente.

Die gezogenen Daten werden in zwei Aspekte unterteilt: den Datentyp (auch als Format bezeichnet) und den Wert der Daten. Der Datentyp ist eine MIME-Zeichenfolge (z. B. text/plain , image/jpeg ) und der Datenwert ist eine Zeichenfolge. Wenn Sie einen Textabschnitt ziehen, werden die Daten im Allgemeinen standardmäßig auf diesen Text angewendet; wenn Sie einen Link ziehen, werden die Daten standardmäßig auf die URL des Links angewendet.

Wenn ein Drag-Ereignis startet, können Entwickler den Datentyp und den Datenwert angeben. Während des Ziehvorgangs können Entwickler mithilfe der Listener-Funktionen dragenter und dragover “ den Datentyp prüfen und so feststellen, ob das gezogene Objekt abgelegt werden darf. Überprüfen Sie beispielsweise in einer Zone, in der nur das Ablegen von Links zulässig ist, ob der Datentyp des Drags text/uri-list ist.

Wenn ein drop -Ereignis auftritt, ruft die Listening-Funktion die gezogenen Daten ab und verarbeitet sie.

Instanzeigenschaften von DataTransfer

DataTransfer.dropEffect

Mit der Eigenschaft DataTransfer.dropEffect wird der Effekt des Ablegens des gezogenen Knotens festgelegt, der sich auf die Form der Maus beim Ziehen über den entsprechenden Bereich auswirkt. Es kann die folgenden Werte annehmen.

• kopieren: den gezogenen Knoten kopieren
• verschieben: Bewegen Sie den gezogenen Knoten
• link: Erstellt einen Link zum gezogenen Knoten
• keine: Der gezogene Knoten kann nicht abgelegt werden

Mit Ausnahme der oben genannten Werte ist das Festlegen anderer Werte ungültig.

target.addEventListener('dragover', Funktion (e) {
  e.preventDefault();
  e.stopPropagation();
  e.dataTransfer.dropEffect = "Kopieren";
});

Sobald im obigen Code das gezogene Element drop , kopiert der Empfangsbereich den Knoten.

Die dropEffect -Eigenschaft wird normalerweise in der Listener-Funktion dragenter und dragover -Ereignisse gesetzt. Diese Eigenschaft hat keine Auswirkung auf dragstart -, drag - und dragleave -Ereignisse. Da diese Eigenschaft nur für den Bereich gilt, der den gezogenen Knoten empfängt, ist sie für den gezogenen Knoten selbst ungültig. Nach dem Betreten des Zielbereichs wird das Ziehverhalten auf den eingestellten Effekt initialisiert.

DataTransfer.effectAllowed

DataTransfer.effectAllowed legt die in diesem Drag zulässigen Effekte fest. Es kann die folgenden Werte annehmen.

• kopieren: den gezogenen Knoten kopieren
• Verschieben: Verschiebt den gezogenen Knoten. Link: Erstellt einen Link zum gezogenen Knoten.
• copyLink: copy oder link zulassen
• copyMove: Ermöglicht copy oder move
• linkMove: link oder move zulassen
• all: Alle Effekte zulassen
• keine: Der gezogene Knoten kann nicht abgelegt werden
• uninitialized: Der Standardwert, der all entspricht

Wenn ein Effekt nicht erlaubt ist, kann der Benutzer diesen Effekt im Zielknoten nicht erzielen.

Diese Eigenschaft und die dropEffect Eigenschaft sind zwei Aspekte derselben Sache. Ersteres legt die für den gezogenen Knoten zulässigen Effekte fest, und Letzteres legt die Effekte des Bereichs fest, der gezogen werden kann. Sie werden häufig zusammen verwendet.

Zum Setzen dieser Eigenschaft kann die Listener-Funktion dragstart -Ereignisses verwendet werden. Das Festlegen dieser Eigenschaft in anderen Ereignislistenerfunktionen ist ungültig.

Quelle.addEventListener('dragstart', Funktion (e) {
  e.dataTransfer.effectAllowed = 'verschieben';
});
 
target.addEventListener('dragover', Funktion (e) {
  ev.dataTransfer.dropEffect = "verschieben";
});

Solange eines dropEffect und „ effectAllowed “ den Wert none hat, kann der drop -Vorgang auf dem Zielknoten nicht abgeschlossen werden.

DataTransfer.files

Die Eigenschaft DataTransfer.files ist ein FileList-Objekt, das eine Reihe lokaler Dateien enthält, die zum Übertragen per Drag & Drop verwendet werden können. Wenn beim Ziehen keine Dateien beteiligt sind, ist diese Eigenschaft ein leeres FileList-Objekt.

Unten sehen Sie ein Beispiel für den Empfang einer gezogenen Datei.

// Der HTML-Code lautet wie folgt // <div id="output" style="min-height: 200px;border: 1px solid black;">
// Ziehen Sie die Datei hierher// </div>
 
var div = document.getElementById('Ausgabe');
 
div.addEventListener("dragenter", Funktion( Ereignis ) {
  div.textinhalt = '';
  event.stopPropagation();
  event.preventDefault();
}, FALSCH);
 
div.addEventListener("dragover", Funktion( Ereignis ) {
  event.stopPropagation();
  event.preventDefault();
}, FALSCH);
 
div.addEventListener("drop", Funktion( Ereignis ) {
  event.stopPropagation();
  event.preventDefault();
  var Dateien = Ereignis.Datentransfer.Dateien;
  für (var i = 0; i < Dateien.Länge; i++) {
    div.textContent += Dateien[i].Name + ' ' + Dateien[i].Größe + 'Bytes\n';
  }
}, FALSCH);

Im obigen Code werden die Informationen der gezogenen Datei über dataTransfer.files gelesen. Wenn Sie den Inhalt einer Datei lesen möchten, müssen Sie FileReader -Objekt verwenden.

div.addEventListener('drop', Funktion(e) {
  e.preventDefault();
  e.stopPropagation();
 
  var fileList = e.dataTransfer.files;
  if (Dateiliste.Länge > 0) {
    var Datei = Dateiliste[0];
    var reader = neuer FileReader();
    reader.onloadend = Funktion(e) {
      wenn (e.target.readyState === FileReader.DONE) {
        var Inhalt = Leser.Ergebnis;
        div.innerHTML = 'Datei: ' + Dateiname + '\n\n' + Inhalt;
      }
    }
    reader.readAsBinaryString(Datei);
  }
});

DataTransfer.types

DataTransfer.types ist ein schreibgeschütztes Array, dessen jedes Mitglied eine Zeichenfolge ist, die das Format der gezogenen Daten enthält (normalerweise ein MIME-Wert). Wenn der Text beispielsweise gezogen wird, ist das entsprechende Mitglied text/plain .

Das folgende Beispiel überprüft den Typ dataTransfer -Attributs, um zu bestimmen, ob der drop -Vorgang auf dem aktuellen Knoten zulässig ist.

Funktion enthält (Liste, Wert) {
  für (var i = 0; i < Liste.Länge; ++i) {
    wenn (Liste[i] === Wert) true zurückgibt;
  }
  gibt false zurück;
}
 
Funktion doDragOver(Ereignis) {
  var isLink = enthält(event.dataTransfer.types, 'text/uri-list');
  wenn (isLink) event.preventDefault();
}

Im obigen Code ist das Ablegen am aktuellen Knoten nur zulässig, wenn es sich bei dem gezogenen Knoten um einen Link handelt.

DataTransfer.items

DataTransfer.items gibt ein schreibgeschütztes arrayähnliches Objekt (Instanz von DataTransferItemList) zurück, dessen jedes Mitglied ein Objekt (Instanz von DataTransferItem) ist, das gezogen wird. Wenn das Drag kein Objekt enthält, wird ein leeres Objekt zurückgegeben.

Eine DataTransferItemList-Instanz hat die folgenden Eigenschaften und Methoden.

• length : Gibt die Anzahl der Mitglieder zurück
• add(data, type) : Fügt einen String mit angegebenem Inhalt und Typ (wie text/html und text/plain ) als Mitglied hinzu
• add(file) : Eine weitere Verwendung der add -Methode, das Hinzufügen einer Datei als Mitglied
• remove(index) : Entfernt das Mitglied an der angegebenen Position
• clear() : Alle Mitglieder entfernen

Eine DataTransferItem-Instanz hat die folgenden Eigenschaften und Methoden.

• kind : Gibt die Art des Mitglieds ( string oder file ) zurück.
• type : Gibt den Typ des Mitglieds zurück (normalerweise ein MIME-Wert).
• getAsFile() : Wenn das gezogene Objekt eine Datei ist, wird die Datei zurückgegeben. Andernfalls wird null zurückgegeben.
• getAsString(callback) : Wenn das gezogene Objekt eine Zeichenfolge ist, übergeben Sie das Zeichen zur Verarbeitung an die angegebene Rückruffunktion. Diese Methode ist asynchron, daher muss eine Rückruffunktion übergeben werden.

Hier ist ein Beispiel.

div.addEventListener('drop', Funktion (e) {
  e.preventDefault();
  if (e.dataTransfer.items != null) {
    für (var i = 0; i < e.dataTransfer.items.length; i++) {
      Konsole.log(e.dataTransfer.items[i].kind + ': ' + e.dataTransfer.items[i].type);
    }
  }
});

DataTransfer-Instanzmethoden

DataTransfer.setData()

Mit DataTransfer.setData() werden die vom Drag-Ereignis übertragenen Daten festgelegt. Diese Methode hat keinen Rückgabewert.

event.dataTransfer.setData('text/plain', 'Zu ziehender Text');

Der obige Code fügt dem aktuellen Drag-Ereignis reine Textdaten hinzu.

Diese Methode akzeptiert zwei Parameter, die beide Zeichenfolgen sind. Der erste Parameter gibt den Datentyp an (z. B. text/plain ), und der zweite Parameter sind die spezifischen Daten. Wenn im dataTransfer Attribut keine Daten des angegebenen Typs vorhanden sind, werden diese Daten hinzugefügt, andernfalls werden die ursprünglichen Daten durch die neuen Daten ersetzt.

Wenn Sie ein Textfeld ziehen oder ausgewählten Text ziehen, werden die entsprechenden Textdaten standardmäßig ohne manuelle Angabe zum dataTransfer Attribut hinzugefügt.

<div ziehbar="true">
  aaa
</div>

Im obigen Code werden durch Ziehen dieses <div> -Elements automatisch die Textdaten aaa eingeblendet.

Verwenden Sie die Methode setData , um die Originaldaten zu ersetzen.

<div
  ziehbar="true"
  ondragstart="event.dataTransfer.setData('text/plain', 'bbb')"
>
  aaa
</div>

Im obigen Code lauten die Drag-Daten tatsächlich bbb und nicht aaa .

Als Nächstes werden andere Datentypen hinzugefügt. Da text/plain das am häufigsten unterstützte Format ist, wird zur Gewährleistung der Kompatibilität empfohlen, immer eine Kopie der Daten im Nur-Text-Format zu speichern.

var dt = event.dataTransfer;
 
// Link hinzufügen dt.setData('text/uri-list', 'http://www.example.com');
dt.setData('text/plain', 'http://www.example.com');
 
// HTML-Code hinzufügen dt.setData('text/html', 'Hallo, <strong>Fremder</strong>');
dt.setData('text/plain', 'Hallo, Fremder');
 
// Fügen Sie die Bild-URL hinzu
dt.setData('text/uri-list', Bild-URL);
dt.setData('text/plain', Bild-URL);

Daten in mehreren Formaten können gleichzeitig bereitgestellt werden.

var dt = event.dataTransfer;
dt.setData('application/x-bookmark', bookmarkString);
dt.setData('text/uri-list', 'http://www.example.com');
dt.setData('text/plain', 'http://www.example.com');

Im obigen Code kann das Drag-Ereignis durch die Speicherung von drei Datentypen zum selben Ereignis unterschiedliche Werte auf unterschiedlichen Objekten drop . Beachten Sie, dass das erste Format ein benutzerdefiniertes Format ist, das standardmäßig nicht vom Browser gelesen werden kann. Dies bedeutet, dass nur ein Knoten, der bestimmten Code bereitgestellt hat, diese Daten drop (lesen) kann.

DataTransfer.getData()

DataTransfer.getData() akzeptiert einen String (der den Datentyp angibt) als Parameter und gibt die vom Ereignis gelieferten Daten des angegebenen Typs zurück (normalerweise die von setData hinzugefügten Daten). Wenn keine Daten des angegebenen Typs vorhanden sind, wird eine leere Zeichenfolge zurückgegeben. Normalerweise können Daten erst abgerufen werden, nachdem drop -Ereignis ausgelöst wurde.

Das Folgende ist eine drop -Event-Listening-Funktion, die zum Abrufen von Daten eines angegebenen Typs verwendet wird.

Funktion onDrop(Ereignis) {
  var data = event.dataTransfer.getData('text/plain');
  event.target.textContent = Daten;
  event.preventDefault();
}

Der obige Code nimmt die Textdaten des Drag-Ereignisses heraus und ersetzt sie durch den Textinhalt des aktuellen Knotens. Beachten Sie, dass Sie zu diesem Zeitpunkt auch das Standardverhalten des Browsers abbrechen müssen, denn wenn der Benutzer einen Link zieht, öffnet der Browser den Link standardmäßig im aktuellen Fenster.

Die Methode getData gibt einen String zurück. Wenn dieser mehrere Datenelemente enthält, müssen Sie ihn manuell analysieren.

Funktion doDrop(Ereignis) {
  var Zeilen = event.dataTransfer.getData('text/uri-list').split('\n');
  für (let Zeile von Zeilen) {
    let link = document.createElement('a');
    link.href = Zeile;
    link.textContent = Zeile;
    Ereignis.Ziel.AnhängenUntergeordnetesElement(Link);
  }
  event.preventDefault();
}

Im obigen Code gibt die Methode getData eine Reihe von Links zurück, die Sie selbst analysieren müssen.

Wenn Sie den Typwert als URL angeben, wird der erste gültige Link abgerufen.

var link = event.dataTransfer.getData('URL');

Das folgende Beispiel extrahiert Daten aus mehreren Datentypen.

Funktion doDrop(Ereignis) {
  var Typen = Ereignis.Datentransfer.Typen;
  var unterstützteTypen = ['text/uri-Liste', 'text/plain'];
  Typen = unterstützteTypen.Filter(Funktion (Wert) { Typen.Includes(Wert) });
  if (Typen.Länge) {
    var data = event.dataTransfer.getData(Typen[0]);
  }
  event.preventDefault();
}

DataTransfer.clearData()

DataTransfer.clearData() akzeptiert einen String (der den Datentyp angibt) als Parameter und löscht die vom Ereignis gebrachten Daten des angegebenen Typs. Wenn kein Typ angegeben ist, werden alle Daten gelöscht. Wenn der angegebene Typ nicht existiert, hat der Aufruf dieser Methode keine Wirkung.

event.dataTransfer.clearData('text/uri-liste');

Der obige Code löscht die vom Ereignis gebrachten Daten vom Typ text/uri-list .

Diese Methode entfernt die gezogene Datei nicht, daher kann DataTransfer.types nach dem Aufruf dieser Methode immer noch den Files zurückgeben (vorausgesetzt, dass eine Datei gezogen wird).

Beachten Sie, dass diese Methode nur in der Listener-Funktion dragstart Ereignisses verwendet werden kann, da dies der einzige Zeitpunkt ist, zu dem die Drag-Vorgangsdaten geschrieben werden können.

DataTransfer.setDragImage()

Während des Ziehvorgangs (nachdem dragstart -Ereignis ausgelöst wurde) zeigt der Browser ein Bild an, das sich mit der Maus bewegt und den gezogenen Knoten anzeigt. Dieses Bild wird automatisch erstellt und zeigt im Normalfall das Aussehen des gezogenen Knotens. Sie müssen es nicht selbst festlegen.

Mit DataTransfer.setDragImage() kann dieses Bild angepasst werden. Es akzeptiert drei Parameter. Der erste ist ein <img> -Knoten oder ein <canvas> -Knoten. Wenn er weggelassen wird oder null , wird das Erscheinungsbild des gezogenen Knotens verwendet. Der zweite und dritte Parameter sind die horizontalen und rechten Koordinaten der Maus relativ zur oberen linken Ecke des Bildes.

Hier ist ein Beispiel.

/* Der HTML-Code lautet wie folgt <div id="drag-with-image" class="dragdemo" draggable="true">
   zieh mich
 </div>
*/
 
var div = document.getElementById('mit-Bild ziehen');
div.addEventListener('dragstart', Funktion (e) {
  var img = document.createElement('img');
  img.src = 'http://Pfad/zu/img';
  e.dataTransfer.setDragImage(img, 0, 0);
}, FALSCH);

Dies ist das Ende dieses Artikels mit der detaillierten Erklärung des JavaScript-Drag-Time-Falls. Weitere relevante Inhalte zu JS-Drag-Time finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder durchsuchen Sie die folgenden verwandten Artikel weiter. Ich hoffe, dass jeder 123WORDPRESS.COM in Zukunft unterstützen wird!