DataTransfer.effectAllowed
property specifies the effect that is allowed for a drag operation. The
copy
operation is used to indicate that the data being dragged will be copied from its present location to the drop location. The
move
operation is used to indicate that the data being dragged will be moved, and the
link
operation is used to indicate that some form of relationship or connection will be created between the source and drop locations.
This property should be set in the
dragstart
event to set the desired drag effect for the drag source. Within the
dragenter
and
dragover
event handlers, this property will be set to whatever value was assigned during the
dragstart
event, thus
effectAllowed
may be used to determine which effect is permitted.
Assigning a value to
effectAllowed
in events other than
dragstart
不起作用。
dataTransfer.effectAllowed;
A
DOMString
representing the drag operation that is allowed. The possible values are:
The item may not be dropped.
A copy of the source item may be made at the new location.
A copy or link operation is permitted.
A copy or move operation is permitted.
A link may be established to the source at the new location.
A link or move operation is permitted.
An item may be moved to a new location.
All operations are permitted.
The default value when the effect has not been set, equivalent to all.
Assigning any other value to
effectAllowed
has no effect and the old value is retained.
Internet Explorer will change the value to be lowercased; thus,
linkMove
will become
linkmove
, and so on.
This example shows the use of the
effectAllowed
and
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);
// 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 drop_handler(ev) {
console.log("drop: dropEffect = " + ev.dataTransfer.dropEffect + " ; effectAllowed = " + ev.dataTransfer.effectAllowed);
ev.preventDefault();
// Get the id of the target and add the moved element to the target's 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();
// Set the dropEffect to 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>
| 规范 | 状态 | 注释 |
|---|---|---|
|
HTML 实时标准
The definition of 'effectAllowed' in that specification. |
实时标准 | |
|
HTML 5.1
The definition of 'effectAllowed' in that specification. |
推荐 | 初始定义 |
| 桌面 | 移动 | |||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|
effectAllowed
|
Chrome Yes | Edge 12 | Firefox Yes | IE ? | Opera Yes | Safari Yes | WebView Android Yes | Chrome Android Yes | Firefox Android Yes | Opera Android Yes | Safari iOS No | Samsung Internet Android Yes |
完整支持
不支持
兼容性未知
DataTransfer
dropEffect
effectAllowed
文件
项
mozCursor
mozItemCount
mozSourceNode
mozUserCancelled
类型