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

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 2

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.