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 |
瀏覽器相容性
載入中…