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 |
浏览器兼容性
加载中…