DataTransfer: setDragImage() 方法
當發生拖拽時，會自動從拖拽目標（觸發 dragstart 事件的元素）生成一個半透明的影像，該影像會在拖拽過程中跟隨滑鼠指標。此影像是自動建立的，因此您無需自己建立。但是，如果您想要一個自定義影像，可以使用 DataTransfer.setDragImage() 方法來設定要使用的自定義影像。該影像通常是一個 <img> 元素，但也可以是 <canvas> 或任何其他可見元素。
該方法的 x 和 y 座標定義了影像相對於滑鼠指標的顯示方式。這些座標定義了滑鼠游標在影像中的偏移量。例如，要使影像的中心與指標對齊，請使用影像寬度和高度的一半作為值。
此方法必須在 dragstart 事件處理程式中呼叫。
語法
js
setDragImage(imgElement, xOffset, yOffset)
引數
imgElement-
用於拖拽反饋影像的影像
Element元素。如果
Element是一個 img 元素，則將拖拽資料儲存點陣圖設定為該元素的影像（以其固有尺寸）；否則，將拖拽資料儲存點陣圖設定為從給定元素生成的影像（其具體實現機制尚未明確規定）。注意：如果
Element是一個現有的HTMLElement，為了將其顯示為拖拽反饋影像，它需要可見於視口。或者，您可以專門為此目的建立一個可能位於螢幕外的新 DOM 元素。 xOffset-
一個
long，表示影像內的水平偏移量。 yOffset-
一個
long，表示影像內的垂直偏移量。
返回值
無（undefined）。
示例
使用 setDragImage()
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
div {
margin: 0em;
padding: 2em;
}
#source {
color: blue;
border: 1px solid black;
}
#target {
border: 1px solid black;
}
js
const source = document.getElementById("source");
const target = document.getElementById("target");
// Create an image and use it for the drag image
// Use the image URL that you desire
const img = new Image();
img.src = "/shared-assets/images/examples/favicon32.png";
source.addEventListener("dragstart", (ev) => {
// Set the drag's format and data. Use the event target's id for the data
ev.dataTransfer.setData("text/plain", ev.target.id);
ev.dataTransfer.setDragImage(img, 10, 10);
});
target.addEventListener("dragover", (ev) => {
ev.preventDefault();
});
target.addEventListener("drop", (ev) => {
ev.preventDefault();
// Get the data, which is the id of the drop target
const data = ev.dataTransfer.getData("text");
ev.target.appendChild(document.getElementById(data));
});
規範
| 規範 |
|---|
| HTML # dom-datatransfer-setdragimage-dev |
瀏覽器相容性
載入中…