Firefox is not displaying image in drag and drop ghost preview
I cannot see the problem when I run your jsfiddle in Firefox 53 (on Windows 7). The ghost image and the dragged image have the same URL and the ghost image is always displayed when dragging. However, I can reproduce the problem with a ghost image that has a different URL.
You could add a hidden img
control to preload the ghost image. Something like this:
<div class="parent container"> <img class="element" draggable="true" src="http://the.element.image" /> <img class="imgGhost" src="http://the.ghost.image" /></div>
According to my tests, these settings prevent the image preload in Firefox:
- Hiding the element with
display: none
- Setting a null size (
width: 0px
orheight: 0px
) - Moving it outside of the viewport (e.g.
left: -10000px
)
I also did not have much success with link prefetching. However, visibility: hidden
seems to work. The style of the hidden image element could be defined as:
.imgGhost { position: absolute; left: 0px; top: 0px; visibility: hidden;}
The method can be tested for two draggable images in this jsfiddle. In the dragstart
event handler, the image URL is retrieved from the hidden element:
img.src = this.parentNode.querySelector(".imgGhost").src;
but it could be hard coded. If you prefer, you could set the src
attribute of the hidden image dynamically when the page is loaded. When testing in the jsfiddle, you can change the ghost image names (e.g. 225x225) before running it again, to make sure that the image was not cached.
According to your comment, preloading the image is not an option. And you are using the same image URL for the dragging ghost image. In that case, you could check this page to see if any option is preventing the reload of the image.
You could also force a repaint of the layout after adding the div
control to the body
in the dragstart
event handler. This can be achieved by calling div.offsetHeight
:
div.appendChild(img);document.body.appendChild(div);div.offsetHeight; // Force repaint
At css
set .parent
pseudo class :hover
and .element
background
to url("/path/to/image")
to fetch image at :hover
of <img class="element" src="http://www.thekrausemouse.com/wp-content/uploads/2016/03/Sample.jpg" draggable="true" />
parent element. At dragstart
event set div
.className
to "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/