Cuando se produce un arrastre, se genera una imagen translúcida a partir del objetivo de arrastre (el elemento dragstart evento se dispara en), y sigue el puntero del mouse durante el arrastre. Esta imagen se crea automáticamente, por lo que no es necesario que la cree usted mismo. Sin embargo, si se desea una imagen personalizada, la DataTransfer.setDragImage() El método se puede utilizar para configurar la imagen personalizada que se utilizará. La imagen normalmente será una elemento, pero también puede ser un o cualquier otro elemento visible.

Los métodos x y y Las coordenadas definen cómo debe aparecer la imagen en relación con el puntero del mouse. Estas coordenadas definen el desplazamiento en la imagen donde debería estar el cursor del mouse. Por ejemplo, para mostrar la imagen de modo que el puntero esté en el centro, utilice valores que sean la mitad del ancho y el alto de la imagen.

Este método debe llamarse en el dragstart controlador de eventos.

Sintaxis

void dataTransfer.setDragImage(img | element, xOffset, yOffset);

Argumentos

img | elemento
Una imagen Element elemento que se utilizará para la imagen de retroalimentación de arrastre.
Si Element es un elemento img, luego establezca el mapa de bits del almacén de datos de arrastre en la imagen del elemento (en su tamaño intrínseco); de lo contrario, establezca el mapa de bits del almacén de datos de arrastre en una imagen generada a partir del elemento dado (el mecanismo exacto para hacerlo no está especificado actualmente).
xDesplazamiento
A long indicando el desplazamiento horizontal dentro de la imagen.
Desplazamiento
A long indicando el desplazamiento vertical dentro de la imagen.

Valor devuelto

void

Ejemplo

Este ejemplo muestra cómo utilizar el setDragImage() método. Tenga en cuenta que el ejemplo se refiere a un archivo de imagen llamado example.gif. Si ese archivo está presente, se utilizará como imagen de arrastre y si ese archivo no está presente, el navegador utilizará su imagen de arrastre predeterminada.

manifestación

<!DOCTYPE html><html lang=en><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>functiondragstart_handler(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.var img =newImage();
 img.src ='example.gif';
 ev.dataTransfer.setDragImage(img,10,10);functiondragover_handler(ev)
 console.log("dragOver");
 ev.preventDefault();functiondrop_handler(ev)
 console.log("Drop");
 ev.preventDefault();// Get the data, which is the id of the drop targetvar data = ev.dataTransfer.getData("text");
 ev.target.appendChild(document.getElementById(data));</script><body><h1>Example of<code>DataTransfer.setDragImage()</code></h1><div><p id="source" ondragstart="dragstart_handler(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="drop_handler(event);" ondragover="dragover_handler(event);">Drop Zone</div></body></html>

Especificaciones

Especificación Estado Comentario
Estándar de vida HTML
La definición de ‘setDragImage ()’ en esa especificación.		 Estándar de vida
HTML 5.1
La definición de ‘setDragImage ()’ en esa especificación.		 Recomendación No incluido en W3C HTML5 Recomendación

Compatibilidad del navegador

Escritorio Móvil
Cromo Borde Firefox explorador de Internet Ópera Safari WebView Android Chrome Android Firefox para Android Opera Android Safari en IOS Internet de Samsung
setDragImage sí 18 3,5 ? sí sí sí sí 4 sí No sí

Ver también