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.
;)
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.
Thanks, helps a lot! I have been tryiing to fix this for a drag and drop, but took me an hour to find that my problem was a plug-in…
Merci beaucoup beaucoup :)
Thank youuuuuuuu :)
Thank you for providing this – exactly what I need!
I’m finding that it doesn’t work in IE8 for some reason though – is it just a conflict on my side or are others having the same issue?
Also, I’m seeing an ‘evt not defined’ error when I turn on firebug JS error console..
This is a very simple way to do the same thing.
document.ondragstart = function () { return false; };@Steve – I tested this code in IE8, FF3.6, Chrome12 and Opera11. None of the browsers didn’t throw any error. Next, this code was written primarily for FireFox. event.preventDefault doesn’t exist in IE8 (and that is why that code doesn’t work in IE8). I read somewhere that preventDefault seems to be supported in IE9. Anyway, please try with don’s solution document.ondragstart …
@don – Your solution looks very elegant. ondragstart mouse event was initially supported only by IE browser familly and now is part of HTML5. So it seems it will cover the most cases … HTML5 Event Attributes
Thank you!
document.ondragstart = function () { return false; };thanks for this is works for my job which is browser specific
Thank you