DataTransfer: setDragImage() method
Baseline
Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since October 2018.
The setDragImage() method of the DataTransfer interface sets a custom image to use as drag feedback. The image will typically be an <img> element but it can also be a <canvas> or any other visible element.
When a drag occurs, a translucent image is generated from the drag target (the element the dragstart event is fired at), and follows the mouse pointer during the drag. This image is created automatically, so you do not need to create it yourself. Use setDragImage() to replace it with a custom image.
The method's x and y coordinates define how the image should appear relative to the mouse pointer. These coordinates define the offset into the image where the mouse cursor should be. For instance, to display the image so that the pointer is at its center, use values that are half the width and height of the image.
During a drag operation, this method can only be used in the handler for the dragstart event, because that's the only time the drag operation's data store is writable. Calling it from any other drag event does nothing. See Modifying the drag data store for details.
Syntax
setDragImage(imgElement, xOffset, yOffset)
Parameters
imgElement-
An image
Elementelement to use for the drag feedback image.If
Elementis an img element, then set the drag data store bitmap to the element's image (at its intrinsic size); otherwise, set the drag data store bitmap to an image generated from the given element (the exact mechanism for doing so is not currently specified).Note: If the
Elementis an existingHTMLElementit needs to be visible in the viewport in order to be shown as a drag feedback image. Alternatively, you can create a new DOM element that might be off-screen specifically for this purpose. xOffset-
A
longindicating the horizontal offset within the image. yOffset-
A
longindicating the vertical offset within the image.
Return value
None (undefined).
Examples
Using setDragImage()
<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>
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");
// 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));
});
Specifications
| Specification |
|---|
| HTML # dom-datatransfer-setdragimage-dev |