DataTransfer：setDragImage() 方法

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since ⁨2018年10月⁩.

发生拖动时，会从拖动目标（dragstart事件触发的元素）处生成一张半透明图像，并在拖动过程中使其跟随鼠标指针。这个图片是自动创建的，你不需要自己去创建它。然而，如果你希望设置一张自定义图像，则可以使用 DataTransfer.setDragImage() 方法，通常是一个 <image> 元素，但也可以是<canvas> 或任何其他图像元素。

该方法的 x 和 y 坐标是图像应该相对于鼠标指针出现的偏移量。坐标指定鼠标指针相对于图片的偏移量。例如，要使图像居中，请使用图像宽度和高度的一半。

你必须在 dragstart 事件处理器中调用此方法。

语法

setDragImage(imgElement, xOffset, yOffset)

参数

imgElement

作为拖动反馈图像的 Element 元素。

如果 Element 是图像元素，则设置拖动数据存储位图为该元素的图像（以其固有大小）；否则，将拖动数据存储位图设置为从给定元素生成的图像（目前尚未规范确切的机制）。

需要注意，如果 Element 是一个已有的 HTMLElement，则它需要在视口中可见才能作为拖动反馈图像显示。或者，你也可以专门为此目的创建一个可能在屏幕外的新 DOM 元素。

xOffset

指示图像中的横向偏移量的 long。

yOffset

指示图像中的纵向偏移量的 long。

<div>
  <p id="source" draggable="true">
    选中该元素并将其拖动到可放置区域，然后释放选择以移动该元素。
  </p>
</div>
<div id="target">可放置区域</div>

css

div {
  margin: 0em;
  padding: 2em;
}
#source {
  color: blue;
  border: 1px solid black;
}
#target {
  border: 1px solid black;
}

const source = document.getElementById("source");
const target = document.getElementById("target");

// 创建一张图像并将其作为拖动图形；你可以使用你所希望使用的图片 URL
const img = new Image();
img.src = "/shared-assets/images/examples/favicon32.png";

source.addEventListener("dragstart", (ev) => {
  // 设置拖动格式与数据（在此示例中使用事件目标的 id 作为数据）
  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();
  // 获取数据（放置目标的 id）
  const data = ev.dataTransfer.getData("text");
  ev.target.appendChild(document.getElementById(data));
});