Saturday, October 11, 2008

Disable Firefox Image Drag

Firefox 3 has a behavior where clicking an image and moving your mouse will start to drag a preview of that image around. The behavior even occurs with the background images for elements.

While this drag and drop behavior for images in Firefox can be really usefull for the visitor, this behavior can be a real problem if you're writing an application that depends on JS to drag around elements that contain images or have background images.

Placing the image or element inside a container and attaching event listeners to that container instead of the image or element with a background seems like an obvious answer, but it will only work for the first click. If the visitor drops the element and tries to drag it again Firefox will start up with the drag and drop behavior.

What does work though is having your mousedown event listener prevent the default action, which seems to be that drag and drop behavior.

Within the event handler you're assigning to your mousedown event, assuming you're argument list includes an event object, as is the case with most jQuery event handlers, your function declaration might look like this.

var callback = function(event){
// Other code...

Nice and easy.


Costin said...

haha!! This reminds me about those people loving firefox! One more bug to figure it out! That's sooo cool.

I hate firefox(it offers absolutely no user experience)

Anonymous said...


Anonymous said...

Uh. "no user experience"? This isn't a "bug". It lets you drag images to the image bar to view them. It's just that that isn't what you always want.

Besides....which browser does a better job? Surely not IE. Not really Safari either. Maybe Chrome? And everything else has such a meager market share that, well, the users have spoken.

Joe said...

I have to agree with this being a usefull feature. However it just happened to get in the way of a WYSIWYG script I was developing this time.

Firefox isn't all that bad, if I wasn't using Opera I'd probably be using Firefox.

Anonymous said...

yeh, I can see why people like firefox better, It has many up's over IE. I also think ie does have some up's over firefox. I like to keep an open mind as opposed to the steriotypical web-designer-ff-die-hard-fan.

What most people dont accept is, the popularity of firefox just means more work for the web developer. I mean IE has been and always will be (likely at least) the standard browser. FF is an optional extra, that forces developers to write more code (better code ill admit, but more).

So although it can be seen as a positive thing, I for one simply believe it means more work.
Note I am saying this regardless of whether it is a better browser or not.

Claudiu said...

That's very nicely done!

Bobby said...

Great post, your solution works well. Just what I needed. Thanks.

Vladimir Syso said...

You save my brain from explode!!
Thanks a lot!!

Firefly said...

Could this possibly used on my photo blog? I don't think it's possible to put each individual image in a container. Could anyone please advise? Thanks.

Anonymous said...

You rescued my slider! Thanks :-)

mrboy said...

Good job Joe

Anonymous said...


That works.
But you did not mention a VERY important thing:

Calling the event handler this way:
<img onMouseDown="handler()"..>
will not work!

You must use instead:
oImage = document.getElementById("ImgName");
oImage.addEventListener("mousedown", FFpreventDrag, false);

function FFpreventDrag(event)
if (event.preventDefault)

Anonymous said...

Thakyou, really help me

Anonymous said...

Really appreciated. Was starting to think that a movable background was going to be a "feature" in my drag&drop application!

Anonymous said...

If you want this to work in IE without throwing an error, you'll need:
if (!event) event = window.event;

at the top of the function. Otherwise event is null, and "if (event.preventDefault) ..." throws an error.

mukpin said...

in firefox, it's still able to drag the image