How to disable Firefox's default drag and drop on all images behavior with jQuery?

Question

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?

Answer 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.

Answer 2

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

.wrapper img {
    pointer-events: none;
}