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() 方法。请注意，此示例引用了一个名为 example.gif 的图像文件。如果该文件存在，它将用作拖动图像；如果该文件不存在，浏览器将使用其默认拖动图像。

演示

html
<!doctype html>
<html lang="en">
  <head>
    <title>Example of DataTransfer.setDragImage()</title>
    <meta name="viewport" content="width=device-width" />
    <style>
      div {
        margin: 0em;
        padding: 2em;
      }
      #source {
        color: blue;
        border: 1px solid black;
      }
      #target {
        border: 1px solid black;
      }
    </style>
    <script>
      function dragStartHandler(ev) {
        console.log("dragStart");
        // Set the drag's format and data. Use the event target's id for the data
        ev.dataTransfer.setData("text/plain", ev.target.id);
        // Create an image and use it for the drag image
        // NOTE: change "example.gif" to an existing image or the image will not
        // be created and the default drag image will be used.
        const img = new Image();
        img.src = "example.gif";
        ev.dataTransfer.setDragImage(img, 10, 10);
      }

      function dragOverHandler(ev) {
        console.log("dragOver");
        ev.preventDefault();
      }

      function dropHandler(ev) {
        console.log("Drop");
        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));
      }
    </script>
  </head>
  <body>
    <h1>Example of <code>DataTransfer.setDragImage()</code></h1>
    <div>
      <p id="source" ondragstart="dragStartHandler(event);" 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"
      ondrop="dropHandler(event);"
      ondragover="dragOverHandler(event);">
      Drop Zone
    </div>
  </body>
</html>

规范

规范
HTML 标准
# dom-datatransfer-setdragimage-dev

浏览器兼容性

BCD 表格仅在启用 JavaScript 的浏览器中加载。

另请参阅