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 July 2015.
Wenn ein Ziehvorgang stattfindet, wird ein durchscheinendes Bild vom Ziehziel (dem Element, bei dem das dragstart
-Ereignis ausgelöst wird) erzeugt und folgt dem Mauszeiger während des Ziehvorgangs. Dieses Bild wird automatisch erstellt, Sie müssen es also nicht selbst erstellen. Wenn jedoch ein benutzerdefiniertes Bild gewünscht wird, kann die DataTransfer.setDragImage()
-Methode verwendet werden, um das benutzerdefinierte Bild festzulegen. Das Bild ist normalerweise ein <img>
-Element, kann aber 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, wo sich der Mauszeiger befinden soll. Um das Bild beispielsweise so anzuzeigen, dass der Zeiger in der Mitte ist, verwenden Sie Werte, die die halbe 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 Ziehrückmeldungbild verwendet werden soll.Wenn
Element
ein img-Element ist, dann setzen Sie die Bitmap des Ziehdatenspeichers auf das Bild des Elements (in seiner intrinsischen Größe); andernfalls setzen Sie die Bitmap des Ziehdatenspeichers auf ein Bild, das aus dem gegebenen Element generiert wurde (der genaue Mechanismus hierfür ist derzeit nicht spezifiziert).Hinweis: Wenn das
Element
ein vorhandenesHTMLElement
ist, muss es im Ansichtsfenster sichtbar sein, um als Ziehrückmeldungbild angezeigt zu werden. Alternativ können Sie ein neues DOM-Element erstellen, das speziell zu diesem Zweck außerhalb des Bildschirms sein kann. xOffset
-
Ein
long
, der den horizontalen Versatz im Bild angibt. yOffset
-
Ein
long
, der den vertikalen Versatz im Bild angibt.
Rückgabewert
Keiner (undefined
).
Beispiele
Dieses Beispiel zeigt, wie die setDragImage()
-Methode verwendet wird. Beachten Sie, dass sich das Beispiel auf eine Bilddatei namens example.gif
bezieht. Wenn diese Datei vorhanden ist, wird sie als Ziehbild verwendet, und wenn nicht, verwendet der Browser sein Standard-Ziehbild.
<!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>
Spezifikationen
Specification |
---|
HTML Standard # dom-datatransfer-setdragimage-dev |
Browser-Kompatibilität
BCD tables only load in the browser