Disable image dragging in FireFox
FireFox 3 has a behaviour where clicking on image (even background image) and moving your mouse will start to drag that image around. Actually, when you drag an image, the browser thinks you want to save it to the desktop, so it starts default dragging action. To disable image dragging in FireFox, you will have to prevent default action on mousedown event for the image. Please try to drag left and right image.
![]() |
![]() |
| Default behaviour drag me |
Dragging disabled drag me if you can |
<!-- left image (default behaviour) --> <img src="spider1.png"> <!-- right image (dragging disabled) --> <img src="spider2.png" onmousedown="if (event.preventDefault) event.preventDefault()">
If you write event.preventDefault() only (without testing), then IE will throw an error. Disabling, or event cancelation is accomplished by calling the Event's preventDefault method. preventDefault cancels the event if it is cancel-able, without stopping further propagation of the event. If you want to disable dragging for all images on the page, then you can use the following JavaScript code:
// register onLoad event with anonymous function
window.onload = function (e) {
var evt = e || window.event,// define event (cross browser)
imgs, // images collection
i; // used in local loop
// if preventDefault exists, then define onmousedown event handlers
if (evt.preventDefault) {
// collect all images on the page
imgs = document.getElementsByTagName('img');
// loop through fetched images
for (i = 0; i < imgs.length; i++) {
// and define onmousedown event handler
imgs[i].onmousedown = disableDragging;
}
}
};
// disable image dragging
function disableDragging(e) {
e.preventDefault();
}
Small but useful tips that can save time.
Related posts
- FireFox displays blurred image
- Enable Java applets in Firefox on Linux
- Image hover using Javascript
- Create thumbnail with PHP (1)
- Image animation with JavaScript


Thank You
Keep up the good work!
thanks, nice tip
Thanks for the help however, the protection fails if JavaScript is disabled!
Is their a CSS property that can be used instead?
Works great for firefox, any idea how to do the same thing in IE without throwing script errors?
@Jeff - You can place if (event.preventDefault) before calling event.preventDefault() and IE will not throw any error. Fortunately it's very easy to write a cross-browser JS code ... just test object before using.
It sure did save lot of time. Thanks for taking time to share this.
Excellent! Just what I was looking for
Hi,
is there a way to put this js in the header so is aplies to all the images?
@Ingmar - Small JavaScript code is prepared for disabling all image dragging on the page. Hope this addition will be helpful to you.
It seems this also disables right-clicking on images. this may be desirable to some, but I would like to retain that functionality.