DataTransfer.effectAllowed
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.
DataTransfer.effectAllowed
属性指定拖放操作所允许的一个效果。copy 操作用于指示被拖动的数据将从当前位置复制到放置位置。move 操作用于指定被拖动的数据将被移动。link 操作用于指示将在源和放置位置之间创建某种形式的关系或连接。
应该在dragstart
事件中设置此属性,以便为拖动源设置所需的拖动效果。在 dragenter
和dragover
事件处理程序中,该属性将设置为在dragstart
事件期间分配的任何值,因此,可以使用effectAllowed
来确定允许哪个效果。
给effectAllowed
赋一个值,以使其在除dragstart
之外的事件中无效。
语法
dataTransfer.effectAllowed;
值
表示允许的拖动操作DOMString
。这个可能值是:
- none
-
此项表示不允许放下
- copy
-
源项目的复制项可能会出现在新位置。
- copyLink
-
允许 copy 或者 link 操作。
- copyMove
-
允许 copy 或者 move 操作。
- link
-
可以在新地方建立与源的链接。
- linkMove
-
允许 link 或者 move 操作。
- move
-
一个项目可能被移动到新位置。
- all
-
允许所有的操作。
- uninitialized
-
效果没有设置时的默认值,则等同于 all。
分配一个没有效果的其他值给 effectAllowed
,则保留原值。
Internet Explorer 会将该值改为小写。因此,linkMove
将会变为 linkmove
,等等。
示例
此例子展示 effectAllowed
用法 和 dropEffect
属性
<!DOCTYPE html>
<html lang=en>
<title>Examples of DataTransfer.{dropEffect,effectAllowed} properties</title>
<meta content="width=device-width">
<style>
div {
margin: 0em;
padding: 2em;
}
#source {
color: blue;
border: 1px solid black;
}
#target {
border: 1px solid black;
}
</style>
<script>
function dragstart_handler(ev) {
console.log("dragStart: dropEffect = " + ev.dataTransfer.dropEffect + " ; effectAllowed = " + ev.dataTransfer.effectAllowed);
// 将这个元素的 id 添加到 drag 载荷中,
// 以便 drop 事件知道将哪个元素添加到其树中。
ev.dataTransfer.setData("text", ev.target.id);
ev.dataTransfer.effectAllowed = "move";
}
function drop_handler(ev) {
console.log("drop: dropEffect = " + ev.dataTransfer.dropEffect + " ; effectAllowed = " + ev.dataTransfer.effectAllowed);
ev.preventDefault();
// 得到目标的 id 并且将移动的元素添加到目标 DOM 中
var data = ev.dataTransfer.getData("text");
ev.target.appendChild(document.getElementById(data));
}
function dragover_handler(ev) {
console.log("dragOver: dropEffect = " + ev.dataTransfer.dropEffect + " ; effectAllowed = " + ev.dataTransfer.effectAllowed);
ev.preventDefault();
// 设置 dropEffect 为 move
ev.dataTransfer.dropEffect = "move"
}
</script>
<body>
<h1>Examples <code>DataTransfer</code>.{<code>dropEffect</code>, <code>effectAllowed</code>} properties</h1>
<div>
<p id="source" ondragstart="dragstart_handler(event);" 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" ondrop="drop_handler(event);" ondragover="dragover_handler(event);">Drop Zone</div>
</body>
</html>
规范
Specification |
---|
HTML Standard # dom-datatransfer-effectallowed-dev |
浏览器兼容性
BCD tables only load in the browser