DataTransfer: effectAllowed 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.effectAllowed-Eigenschaft legt fest, welcher Effekt für eine Ziehoperation erlaubt ist. Die copy-Operation wird verwendet, um anzuzeigen, dass die gezogenen Daten von ihrem aktuellen Standort an den Zielort kopiert werden. Die move-Operation wird verwendet, um anzuzeigen, dass die gezogenen Daten verschoben werden, und die link-Operation zeigt an, dass eine Art von Beziehung oder Verbindung zwischen der Quelle und den Zielorten erstellt wird.
Diese Eigenschaft sollte im dragstart-Ereignis festgelegt werden, um den gewünschten Zieheffekt für die Ziehquelle festzulegen. Innerhalb der Ereignis-Handler von dragenter und dragover wird diese Eigenschaft auf den Wert gesetzt, der während des dragstart-Ereignisses zugewiesen wurde, sodass effectAllowed verwendet werden kann, um zu bestimmen, welcher Effekt erlaubt ist.
Das Zuweisen eines Wertes zu effectAllowed in anderen Ereignissen als dragstart hat keine Wirkung.
Wert
Ein String, der die erlaubte Ziehoperation darstellt. Die möglichen Werte sind:
none-
Das Element darf nicht abgelegt werden.
copy-
Eine Kopie des Quellobjekts darf am neuen Ort erstellt werden.
copyLink-
Eine Kopier- oder Link-Operation ist erlaubt.
copyMove-
Eine Kopier- oder Verschiebe-Operation ist erlaubt.
link-
Ein Link zur Quelle darf am neuen Ort erstellt werden.
linkMove-
Eine Link- oder Verschiebe-Operation ist erlaubt.
move-
Ein Element darf an einen neuen Ort verschoben werden.
all-
Alle Operationen sind erlaubt.
uninitialized-
Der Standardwert, wenn der Effekt nicht festgelegt wurde, entspricht allen.
Das Zuweisen eines anderen Wertes zu effectAllowed hat keine Wirkung und der alte Wert bleibt erhalten.
Beispiele
effectAllowed festlegen
In diesem Beispiel setzen wir effectAllowed im dragstart-Handler auf "move".
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> <pre id="output"></pre> <button id="reset">Reset</button> CSS
div { margin: 0em; padding: 2em; } #source { color: blue; border: 1px solid black; } #target { border: 1px solid black; } #output { height: 100px; overflow: scroll; } JavaScript
function dragstartHandler(ev) { log(`dragstart: 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"; } function dropHandler(ev) { log(`drop: effectAllowed = ${ev.dataTransfer.effectAllowed}`); ev.preventDefault(); // Get the id of the target and add the element to the target's DOM const data = ev.dataTransfer.getData("text"); ev.target.appendChild(document.getElementById(data)); } function dragoverHandler(ev) { log(`dragover: effectAllowed = ${ev.dataTransfer.effectAllowed}`); ev.preventDefault(); } const source = document.querySelector("#source"); const target = document.querySelector("#target"); source.addEventListener("dragstart", dragstartHandler); target.addEventListener("dragover", dragoverHandler); target.addEventListener("drop", dropHandler); function log(message) { const output = document.querySelector("#output"); output.textContent = `${output.textContent}\n${message}`; output.scrollTop = output.scrollHeight; } const reset = document.querySelector("#reset"); reset.addEventListener("click", () => document.location.reload()); Ergebnis
Spezifikationen
| Specification |
|---|
| HTML # dom-datatransfer-effectallowed-dev |
Browser-Kompatibilität
Loading…