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 July 2015.
Die DataTransfer.effectAllowed
-Eigenschaft gibt den
Effekt an, der für einen Drag-Vorgang erlaubt ist. Die copy-Operation zeigt an,
dass die Daten, die gezogen werden, von ihrem aktuellen Standort an den Zielort
kopiert werden. Die move-Operation zeigt an, dass die Daten, die gezogen
werden, verschoben werden, und die link-Operation zeigt an, dass eine Art von
Beziehung oder Verbindung zwischen dem Quell- und dem Zielort hergestellt wird.
Diese Eigenschaft sollte im dragstart
-Ereignis gesetzt werden, um den gewünschten Drag-Effekt für die Drag-Quelle festzulegen. Innerhalb der Ereignis-Handler von dragenter
und dragover
wird diese Eigenschaft auf den Wert gesetzt, der während des dragstart
-Ereignisses zugewiesen wurde. Daher kann effectAllowed
verwendet werden, um zu bestimmen, welcher Effekt zulässig ist.
Einem anderen Ereignis als dragstart
einen Wert für effectAllowed
zuzuweisen, hat keinen Effekt.
Wert
Ein String, der die erlaubte Drag-Operation darstellt. Die möglichen Werte sind:
none
-
Das Element darf nicht fallen gelassen werden.
copy
-
Eine Kopie des Quellobjekts kann am neuen Ort erstellt werden.
copyLink
-
Eine Kopier- oder Verbindungsoperation ist erlaubt.
copyMove
-
Eine Kopier- oder Verschiebeoperation ist erlaubt.
link
-
Eine Verbindung zum Quellobjekt kann am neuen Ort hergestellt werden.
linkMove
-
Eine Verbindungs- 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, was allen entspricht.
Das Zuweisen eines anderen Wertes zu effectAllowed
hat keinen Effekt, und der alte Wert bleibt erhalten.
Beispiele
effectAllowed setzen
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 Standard # dom-datatransfer-effectallowed-dev |
Browser-Kompatibilität
BCD tables only load in the browser