DataTransfer: effectAllowed Eigenschaft
Baseline
Weitgehend verfügbar
Diese Funktion ist gut etabliert und funktioniert auf vielen Geräten und in vielen Browserversionen. Sie ist seit Juli 2015 browserübergreifend verfügbar.
Die effectAllowed-Eigenschaft des DataTransfer-Interfaces gibt den Effekt an, der für eine Ziehoperation erlaubt ist. Die copy-Operation wird verwendet, um anzuzeigen, dass die gezogenen Daten von ihrem aktuellen Ort zur Ablagestelle kopiert werden. Die move-Operation zeigt an, dass die gezogenen Daten verschoben werden, und die link-Operation zeigt an, dass eine Art von Beziehung oder Verbindung zwischen der Quelle und der Ablagestelle hergestellt wird.
Während einer Ziehoperation kann diese Eigenschaft nur im Handler für das dragstart-Ereignis gesetzt werden, da dies der einzige Zeitpunkt ist, an dem der Datenspeicher der Ziehoperation beschreibbar ist. Das Zuweisen eines Wertes in einem anderen Ziehereignis hat keine Wirkung. Siehe Ändern des Ziehdatenspeichers für Details.
Innerhalb der Event-Handler für 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.
Wert
Ein String, der die erlaubte Ziehoperation darstellt. Die möglichen Werte sind:
none-
Das Element darf nicht abgelegt werden.
copy-
Eine Kopie des Quell-Elements kann am neuen Ort erstellt werden.
copyLink-
Eine Kopier- oder Link-Operation ist erlaubt.
copyMove-
Eine Kopier- oder Verschiebeoperation ist erlaubt.
link-
Ein Link kann zur Quelle am neuen Ort erstellt werden.
linkMove-
Eine Link- oder Verschiebeoperation ist erlaubt.
move-
Ein Element kann an einen neuen Ort verschoben werden.
all-
Alle Operationen sind erlaubt.
uninitialized-
Der Standardwert, wenn der Effekt nicht gesetzt wurde, gleichbedeutend mit "all".
Das Zuweisen eines anderen Wertes zu effectAllowed hat keine Auswirkung und der alte Wert bleibt bestehen.
Beispiele
effectAllowed setzen
In diesem Beispiel setzen wir effectAllowed auf "move" im dragstart-Handler.
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
| Spezifikation |
|---|
| HTML # dom-datatransfer-effectallowed-dev |