DataTransfer：effectAllowed 属性
DataTransfer.effectAllowed 属性指定拖动操作所允许的效果。copy 操作用于指示被拖动的数据将从当前位置复制到放置位置。move 操作用于指定被拖动的数据将被移动。link 操作用于指示将在源位置和放置位置之间创建某种形式的关系或连接。
你应在 dragstart 事件中为拖动源设置预期拖动效果。在 dragenter 和 dragover 事件处理器中，该属性将被设置为在
dragstart 事件期间分配的任何值，因此，你可以使用 effectAllowed 来确定什么效果被允许使用。
向 effectAllowed 赋除 dragstart 外其他事件的值的操作无效。
值
表示允许的拖动操作字符串，取值可以是：
none-
不允许放置项目。
copy-
可能会在新位置生成源项目的复制项。
copyLink-
允许 copy 或者 link 操作。
copyMove-
允许 copy 或者 move 操作。
link-
可能在新位置建立与源项目的链接。
linkMove-
允许 link 或者 move 操作。
move-
项目可能被移动到新位置。
all-
允许所有的操作。
uninitialized-
效果未设置时的默认值，等同于 all。
向 effectAllowed 赋其他值的操作无效，其取值不会被修改。
示例
设置 effectAllowed
在本示例中，我们在 dragstart 处理器中将 effectAllowed 设置为 "move"。
HTML
html
<div>
<p id="source" draggable="true">
选中该元素并将其拖动到可放置区域，随后释放选择以移动该元素。
</p>
</div>
<div id="target">可放置区域</div>
<pre id="output"></pre>
<button id="reset">重置</button>
CSS
css
div {
margin: 0em;
padding: 2em;
}
#source {
color: blue;
border: 1px solid black;
}
#target {
border: 1px solid black;
}
#output {
height: 100px;
overflow: scroll;
}
JavaScript
js
function dragstartHandler(ev) {
log(`dragstart: effectAllowed = ${ev.dataTransfer.effectAllowed}`);
// 将该元素的 id 添加到拖动负载中，以便放置事件的处理器能分清要将哪个元素添加到树中
ev.dataTransfer.setData("text", ev.target.id);
ev.dataTransfer.effectAllowed = "move";
}
function dropHandler(ev) {
log(`drop：effectAllowed = ${ev.dataTransfer.effectAllowed}`);
ev.preventDefault();
// 获取目标的 id 并将被移动的元素添加到目标的 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());
结果
规范
| 规范 |
|---|
| HTML # dom-datatransfer-effectallowed-dev |