DataTransfer: setDragImage() Methode

Baseline Widely available

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

Wenn ein Ziehvorgang stattfindet, wird ein durchscheinendes Bild vom Ziehziel (dem Element, bei dem das dragstart Ereignis ausgelöst wird) generiert, das während des Ziehens dem Mauszeiger folgt. Dieses Bild wird automatisch erstellt, sodass Sie es nicht selbst erstellen müssen. Falls jedoch ein benutzerdefiniertes Bild gewünscht wird, kann die DataTransfer.setDragImage() Methode verwendet werden, um das benutzerdefinierte Bild festzulegen. Das Bild wird typischerweise ein <img> Element sein, es kann jedoch auch ein <canvas> oder ein anderes sichtbares Element sein.

Die x- und y-Koordinaten der Methode definieren, wie das Bild relativ zum Mauszeiger erscheinen soll. Diese Koordinaten definieren den Versatz im Bild, an dem sich der Mauszeiger befinden soll. Um zum Beispiel das Bild so darzustellen, dass der Zeiger in der Mitte liegt, verwenden Sie Werte, die der halben Breite und Höhe des Bildes entsprechen.

Diese Methode muss im dragstart Ereignishandler aufgerufen werden.

Syntax

setDragImage(imgElement, xOffset, yOffset)

Parameter

imgElement

Ein Bild Element Element, das für das Ziehfeedbackbild verwendet werden soll.

Wenn Element ein img-Element ist, dann setzen Sie den Drag-Daten-Store-Bitmap auf das Bild des Elements (in seiner intrinsischen Größe); andernfalls setzen Sie den Drag-Daten-Store-Bitmap auf ein Bild, das aus dem angegebenen Element generiert wird (der genaue Mechanismus dafür ist derzeit nicht spezifiziert).

Hinweis: Wenn das Element ein bestehendes HTMLElement ist, muss es im Viewport sichtbar sein, um als Ziehfeedbackbild angezeigt zu werden. Alternativ können Sie ein neues DOM-Element erstellen, das speziell für diesen Zweck außerhalb des Bildschirms liegt.

xOffset

Ein long, das den horizontalen Versatz innerhalb des Bildes angibt.

yOffset

Ein long, das den vertikalen Versatz innerhalb des Bildes angibt.

<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; }

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)); });