¿Cómo se apaga setDragImage

Question

tal como se indica. ¿Cómo se desactiva la imagen de arrastre? Tengo un panel flotante y la imagen de arrastre se ve muy mal. no-jquery por favor.

Answer 1

De MDN:

Si el nodo es un elemento HTML img, un elemento HTML canvas o un elemento XUL image, se utilizan los datos de la imagen. De lo contrario, image debería ser un nodo visible y la imagen de arrastre se creará a partir de esto.

De esto se sigue que "apagar" la imagen de arrastre que sólo debe pasar a un elemento vacío (pero visibile) a setDragImage. ¿Qué tal esto:

// create an empty <span> 
var dragImgEl = document.createElement('span'); 

// set its style so it'll be effectively (but not technically) invisible and 
// won't change document flow 
dragImgEl.setAttribute('style', 
    'position: absolute; display: block; top: 0; left: 0; width: 0; height: 0;'); 

// add it to the document 
document.body.appendChild(dragImgEl); 

// your DataTransfer code here--assume we put it in a variable called 'dt' 

dt.setDragImage(dragImgEl, 0, 0); 

Si un vacío <span> no funciona por alguna razón, siempre se puede utilizar <img src="blank.png"/> donde blank.png es un sistema transparente de 1 píxel PNG. ¡Espero que ayude!

Answer 2

Establecer la imagen fantasma a un gif transparente usando 1x1px cadena de datos

se inspiró en un comentario en el hilo, sin embargo, la imagen que ponen en su comentario no funcionaba así que tuve que buscar en torno a éste.

Esto resuelve mi problema en todos los navegadores.

element.ondragstart = function (ev) { 
    var img = document.createElement('img') 
    img.src = 'data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7' 
    ev.dataTransfer.setDragImage(img, 0, 0) 
}