DataTransfer：dropEffect 属性
DataTransfer.dropEffect 属性控制在拖放操作期间提供给用户的反馈（通常是视觉反馈）。它会影响拖动时显示的游标。例如，当用户将鼠标悬停在目标放置元素上时，浏览器游标可能会指示将发生的操作类型。
当创建 DataTransfer 对象时，dropEffect 被设置为一个字符串值。获取时，它返回当前值。设置时，如果新值是下面列出的值之一，则属性的当前值将被设置为新值，其他值将被忽略。
对于 dragenter 和 dragover 事件，dropEffect 将根据用户请求的操作进行初始化。如何确定这一点是平台特定的，但通常用户可以通过按住修饰键（如 Alt 键）来调整所需的操作。在 dragenter 和 dragover 事件的处理程序中，如果希望的操作与用户请求的操作不同，则应修改 dropEffect。
对于 drop 和 dragend 事件，dropEffect 将被设置为期望的操作，这将是最后一个 dragenter 或 dragover 事件之后 dropEffect 的值。例如，在 dragend 事件中，如果期望的 dropEffect 是“move”，则应从源中删除正在拖动的数据。
值
一个表示拖放操作效果的字符串。可能的值为
将任何其他值赋给 dropEffect 没有效果，并且会保留旧值。
示例
此示例展示了 dropEffect 和 effectAllowed 属性的用法。
HTML
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>
CSS
css
div {
margin: 0em;
padding: 2em;
}
#source {
color: blue;
border: 1px solid black;
}
#target {
border: 1px solid black;
}
JavaScript
js
const source = document.getElementById("source");
const target = document.getElementById("target");
source.addEventListener("dragstart", (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";
});
target.addEventListener("drop", (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
const data = ev.dataTransfer.getData("text");
ev.target.appendChild(document.getElementById(data));
});
target.addEventListener("dragover", (ev) => {
console.log(
`dragOver: dropEffect = ${ev.dataTransfer.dropEffect} ; effectAllowed = ${ev.dataTransfer.effectAllowed}`,
);
ev.preventDefault();
// Set the dropEffect to move
ev.dataTransfer.dropEffect = "move";
});
规范
| 规范 |
|---|
| HTML # dom-datatransfer-dropeffect-dev |
浏览器兼容性
加载中…