How To Disable Firefox's Default Drag And Drop On All Images Behavior With JQuery?

Firefox has this annoying behavior that it let's the user drag and drop any image element by default. How can I cleanly disable this default behavior with jQuery?

Solution 1:

The following will do it in Firefox 3 and later:

$(document).on("dragstart", function() {
     return false;
});

If you would prefer not to disable all drags (e.g. you may wish to still allow users to drag links to their link toolbar), you could make sure only <img> element drags are prevented:

$(document).on("dragstart", function(e) {
     if (e.target.nodeName.toUpperCase() == "IMG") {
         return false;
     }
});

Bear in mind that this will allow images within links to be dragged.

Solution 2:

Does it need to be jQuery? You just need to define a callback function for your mousedown event on the image(s) in question with event.preventDefault().

So your image tag could look like this:

<img src="myimage.jpg" onmousedown="if (event.preventDefault) event.preventDefault()" />

The additional if is needed because otherwise IE throws an error. If you want this for all image tags you just need to iterate through the imgtags with jQuery and attach the onmousedown event handler.

There is a nice explanation (and example) on this page: "Disable image dragging in FireFox" and a not as well documented version is here using jQuery as reference: "Disable Firefox Image Drag"

Solution 3:

If Javascript is an optional requirement, you can try with CSS

.wrapper img {
    pointer-events: none;
}

Solution 4:

Solution without jQuery:

document.addEventListener('dragstart', function (e) {
    e.preventDefault();
});

Solution 5:

Referencing Tim Down's solution, you can achieve the equivalent of his second code snippet of only disabling img drags while using jQuery:

$(document).on("dragstart", "img", function() {
     return false;
});