DataTransfer: dropEffect-Eigenschaft
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since Juli 2015.
Die DataTransfer.dropEffect-Eigenschaft steuert das Feedback (typischerweise visuell), das der Benutzer während einer Drag-and-Drop-Operation erhält. Es wird beeinflussen, welcher Cursor während des Ziehens angezeigt wird. Zum Beispiel kann der Cursor des Browsers anzeigen, welche Art von Operation stattfindet, wenn der Benutzer über ein Ziel-Drop-Element schwebt.
Wenn das DataTransfer-Objekt erstellt wird, wird dropEffect auf einen String-Wert gesetzt. Beim Abrufen gibt es seinen aktuellen Wert zurück. Beim Setzen wird der Eigenschaftswert auf den neuen Wert festgelegt, wenn dieser einer der unten aufgeführten Werte ist; andere Werte werden ignoriert.
Für die dragenter und dragover Ereignisse wird dropEffect basierend darauf initialisiert, welche Aktion der Benutzer anfordert. Wie dies bestimmt wird, ist plattformspezifisch, aber typischerweise kann der Benutzer Modifikatortasten wie die Alt-Taste drücken, um die gewünschte Aktion anzupassen. Innerhalb von Ereignishandlern für die dragenter und dragover Ereignisse sollte dropEffect geändert werden, wenn eine andere Aktion als die vom Benutzer angeforderte gewünscht wird.
Für die drop und dragend Ereignisse wird dropEffect auf die gewünschte Aktion gesetzt, die der Wert war, den dropEffect nach dem letzten dragenter oder dragover Ereignis hatte. Bei einem dragend Ereignis sollte beispielsweise, wenn der gewünschte dropEffect "move" ist, die zu ziehenden Daten aus der Quelle entfernt werden.
Wert
Ein String, der den Effekt der Ziehoperation darstellt. Die möglichen Werte sind:
copy-
Eine Kopie des Quellobjekts wird am neuen Ort erstellt.
move-
Ein Objekt wird an einen neuen Ort verschoben.
link-
Eine Verknüpfung zum Quellobjekt am neuen Ort wird erstellt.
none-
Das Objekt kann nicht fallen gelassen werden.
Das Zuweisen eines anderen Wertes zu dropEffect hat keine Wirkung, und der alte Wert bleibt erhalten.
Beispiel
Dieses Beispiel zeigt die Verwendung der Eigenschaften dropEffect und effectAllowed.
HTML
<div> <p id="source" draggable="true"> Select this element, drag it to the Drop Zone and then release the selection to move the element. </p> </div> <div id="target">Drop Zone</div> CSS
div { margin: 0em; padding: 2em; } #source { color: blue; border: 1px solid black; } #target { border: 1px solid black; } JavaScript
const source = document.getElementById("source"); const target = document.getElementById("target"); source.addEventListener("dragstart", (ev) => { console.log( `dragStart: dropEffect = ${ev.dataTransfer.dropEffect} ; effectAllowed = ${ev.dataTransfer.effectAllowed}`, ); // Add this element's id to the drag payload so the drop handler will // know which element to add to its tree ev.dataTransfer.setData("text", ev.target.id); ev.dataTransfer.effectAllowed = "move"; }); target.addEventListener("drop", (ev) => { console.log( `drop: dropEffect = ${ev.dataTransfer.dropEffect} ; effectAllowed = ${ev.dataTransfer.effectAllowed}`, ); ev.preventDefault(); // Get the id of the target and add the moved element to the target's DOM const data = ev.dataTransfer.getData("text"); ev.target.appendChild(document.getElementById(data)); }); target.addEventListener("dragover", (ev) => { console.log( `dragOver: dropEffect = ${ev.dataTransfer.dropEffect} ; effectAllowed = ${ev.dataTransfer.effectAllowed}`, ); ev.preventDefault(); // Set the dropEffect to move ev.dataTransfer.dropEffect = "move"; }); Spezifikationen
| Specification |
|---|
| HTML # dom-datatransfer-dropeffect-dev |
Browser-Kompatibilität
Loading…