How can I make sure that there is no “Ghost” when launching an image in Firefox?

Question

When you drag an image, a translucent ghost image appears that follows the mouse when you hold it.

Is there a way to apply CSS / JS to eliminate this effect on a specific part?

Answer 1

You can try using css background images instead of actual images with the img tag.

Answer 2

The only way to disable this in the browser (it does the same in Safari) is to return false from the onmousedown event in the img element (or event.preventDefault() ) and handle the rest of the drag and drop operations using javascript.

Virtually every core JavaScript library supports drag and drop. You can use their code as a source place or just use it directly if you are already using the library on your page.

Answer 3

The easiest way is to set the very large x and y coordinates to setDragImage away from the screen. For instance:

 element.addEventListener('dragstart', function(event) { event.dataTransfer.setDragImage(element, -99999, -99999); }, false); 

The actual element you are switching to setDragImage doesn't really matter. For convenience, we use the same element.

Answer 4

Just add the attribute draggable="false" to the image. Also add a container div .

eg.

 <div draggable="true"> <img draggable="false" src="your/path/to/image.png"/> Optional Text <div> 

Also add

 function handleDragStart(e) { // other code var dragIcon = document.createElement('img'); dragIcon.src = 'another/image/path.png'; e.dataTransfer.setDragImage(dragIcon, -10, -10); // other code } 

Answer 5

You need to return false from the ondragstart event. I had this problem myself, and how I solved it. This is a problem in IE7 as well. The problem is that IE is dragging and dropping the api, its standardization in html5 and the subsequent implementation of Firefox.

Other suggestions for using javascript library for drag and drop will not work. (I already used jQuery UI), since this is the last thing in firefox, and the jQuery user interface does not seem to take it into account.

Answer 6

I am afraid that this is the behavior / function of the browser. I'm not sure about any particular CSS FF style that can handle this.

You might want to modify the Firefox code to have your own firefox. If you are looking for some tools for this not programmatically, I think you should post to superuser.com: P

Answer 7

There is a Firefox option in about:config to disable it - nglayout.enable_drag_images - but obviously this will only work for you. I assume you want to remove it for all visitors?

If you want to do drag and drop, maybe try jQuery UI or another JS library? You can easily move other elements, and you could use a background image such as Tim on one of them.

Another benefit is the use of CSS sprite effects to reduce HTTP requests. I created a jigsaw puzzle with the jQuery user interface, which is actually only one image, but it looks like a few.