javascript - Firefox no muestra la imagen en la vista previa fantasma de arrastrar y soltar

html css

Question

Estoy intentando mostrar el elemento fantasma en lugar de la vista previa predeterminada del navegador para arrastrar y soltar. El problema es que en la imagen de Firefox dentro del elemento fantasma no se muestra mientras se arrastra. Pero si lo suelto, y arrastro de nuevo la imagen se muestra.

Así que creo que esto podría ser algún tipo de problema relacionado con el caché. Pero no puedo ver cómo puedo pre-cachear la imagen en este caso.

Aquí está el código:

// html:

<div class="parent container">
<img class="element" src="http://www.thekrausemouse.com/wp-content/uploads/2016/03/Sample.jpg" draggable="true" />
</div>

// js:

document.querySelector(".element").addEventListener("dragstart", function(e) {
var img = document.createElement("img");
var div = document.createElement(''div'');
div.style.width = ''100px'';
div.style.height = ''100px'';
div.style.position = ''fixed'';
div.style.top = ''-1000000px'';
div.style.left = ''-1000000px'';
div.style.border = ''2px solid red'';
img.src = "http://www.thekrausemouse.com/wp-content/uploads/2016/03/Sample.jpg";
img.style.width = ''100px'';
img.style.height = ''100px'';
div.appendChild(img);
document.body.appendChild(div);
e.dataTransfer.setData(''text/plain'', ''test'');
e.dataTransfer.setDragImage(div, 0, 0);
}, false);

Fiddle: https://jsfiddle.net/etseq5cg/5/

Pasos para reproducir:

1) abrir el fragmento de violín / correr

2) tratar de arrastrar la imagen de muestra

Actual: verás un cuadrado vacío con borde rojo.

Espera: plaza con imagen interior.

Para volver a reproducirlo, debes forzar la recarga de la página (ctrl + f5). Es por eso que creo que esto es un problema de caché.

Nota: Sé que debo eliminar el elemento fantasma de DOM en el controlador de arrastre, pero esto no es importante aquí.

Actualizar:

1) el caso de uso real incluye la vista con una gran cantidad de imágenes (~ 500), por lo que no es una opción para guardar en caché las imágenes a través de js.

2) Para los que no pudieron reproducir el problema, aquí está la captura de pantalla: al principio, se ve la vista previa después de la recarga (ctrl + f5), y luego el segundo intento de arrastre. Tenga en cuenta que en ambos casos no se ven solicitudes de http en la pestaña de red en el inspector web.

Answer 1

En css establezca .parent pseudo class :hover y .element background en url("/path/to/image") para buscar la imagen en :hover de <img class="element" src="http://www.thekrausemouse.com/wp-content/uploads/2016/03/Sample.jpg" draggable="true" /> elemento padre. En el evento dragstart , configure div .className como "element" .

.element {
width: 100px;
height: 100px;
background: url("http://www.thekrausemouse.com/wp-content/uploads/2016/03/Sample.jpg");
background-size: 100px 100px;
}
.parent:hover {
background: url("http://www.thekrausemouse.com/wp-content/uploads/2016/03/Sample.jpg");
background-size: 0px 0px;
}

<div class="parent container">
<img class="element" src="http://www.thekrausemouse.com/wp-content/uploads/2016/03/Sample.jpg" draggable="true" />
</div>
<script>
function handleImage(e) {
var div = document.createElement(''div'');
div.style.width = ''100px'';
div.style.height = ''100px'';
div.style.position = ''fixed'';
div.style.top = ''-1000000px'';
div.style.left = ''-1000000px'';
div.style.border = ''2px solid red'';
div.className = "element";
document.body.appendChild(div);
e.dataTransfer.setData(''text/plain'', ''test'');
e.dataTransfer.setDragImage(div, 0, 0);
}
document.querySelector(".element")
.addEventListener("dragstart", handleImage, false);
</script>

jsfiddle https://jsfiddle.net/etseq5cg/7/

Answer 2

No puedo ver el problema cuando ejecuto https://jsfiddle.net/etseq5cg/5/ en Firefox 53 (en Windows 7). La imagen fantasma y la imagen arrastrada tienen la misma URL y la imagen fantasma siempre se muestra al arrastrar. Sin embargo, puedo reproducir el problema con una imagen fantasma que tiene una URL diferente.

Podría agregar un control img oculto para precargar la imagen fantasma. Algo como esto:

<div class="parent container">
<img class="element" draggable="true" src="http://the.element.image" />
<img class="imgGhost" src="http://the.ghost.image" />
</div>

Según mis pruebas, estas configuraciones impiden la precarga de la imagen en Firefox:

• Ocultando el elemento con display: none
• Configuración de un tamaño nulo ( width: 0px o height: 0px )
• left: -10000px fuera de la ventana left: -10000px (por ejemplo, a la left: -10000px )

Tampoco tuve mucho éxito con la precarga de enlaces . Sin embargo, la visibility: hidden parece funcionar. El estilo del elemento de imagen oculta podría definirse como:

.imgGhost {
position: absolute;
left: 0px;
top: 0px;
visibility: hidden;
}

El método se puede probar para dos imágenes arrastrables en este jsfiddle . En el dragstart eventos dragstart , la URL de la imagen se recupera del elemento oculto:

img.src = this.parentNode.querySelector(".imgGhost").src;

Pero podría ser difícil de codificar. Si lo prefiere, puede establecer el atributo src de la imagen oculta dinámicamente cuando se carga la página. Al probar en el archivo jsfiddle, puede cambiar los nombres de las imágenes fantasma (p. Ej., 225x225) antes de volver a ejecutarla, para asegurarse de que la imagen no se haya guardado en la memoria caché.

Según su comentario, la precarga de la imagen no es una opción. Y está utilizando la misma URL de imagen para la imagen fantasma que arrastra. En ese caso, puede consultar esta página para ver si alguna opción impide la recarga de la imagen.

También puede forzar un repintado del diseño después de agregar el control div al body en el controlador de eventos dragstart . Esto se puede lograr llamando a div.offsetHeight :

div.appendChild(img);
document.body.appendChild(div);
div.offsetHeight; // Force repaint