How do I make it so that there is no “Ghost” when I drag an image in Firefox?

Question

When you drag an image , there is a semi-transparent ghost image that follow your mouse when you hold it down.

Is there some way to apply CSS/JS to remoe this effect on a certain portion?

Answer 1

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

Answer 2

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

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

The actual element you pass to setDragImage doesn't really matter. We use the same element here for convenience.

Answer 3

The only way to disable that in the browser (It does the same thing in Safari) is by returning false from the onmousedown event on the img element (or event.preventDefault()) and by handling the rest of the drag operation with javascript.

Pretty much every major JavaScript library has support for 'dragging' and 'dropping'. You could use their code as a starting place or just use it outright if you already are using a library on your page.

Answer 4

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

E.g.

<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 issue myself, and that's how I've solved it. It's an issue in IE7 as well. The problem is IE's drag and drop api, its standardisation into html5, and firefox's subsequent implementation of it.

Others suggestions of using a javascript library for drag and drop won't work. (I was already using jquery UI), as this is a recent thing in firefox, and jQuery UI doesn't seem to account for it.

Answer 6

I'm afraid it's the browser behaviour/feature. I'm not sure of any specific FF CSS style which can handle that.

You might want to modify the Firefox's code to have your own firefox. If you are looking for some means to do it non-programmatically, I guess you have to post in superuser.com :P

Answer 7

There is be a Firefox option in about:config to turn this off - nglayout.enable_drag_images - but obviously that will only work for you. I'm guessing you want to remove it for all visitors?

If you want to do drag & drop, maybe try jQuery UI or another JS library? You should be able to move other elements quite easily, and you could use a background image like Tim said on one of those.

Another advantage to that is you can use CSS sprite effects to reduce HTTP requests. I made a jigsaw puzzle with jQuery UI, which is actually only one image, but it looks like several.