Prevent Internet Explorer’s Default Image Dragging Action

By  on  

Since the web is moving more and more toward a drag and drop world, it's important to prevent Internet Explorer's default dragging action when attempting to drag an image. JavaScript makes this possible.

Using MooTools

document.ondragstart = function () { return false; };

Happy dragging and dropping!

Recent Features

  • By
    Interview with a Pornhub Web Developer

    Regardless of your stance on pornography, it would be impossible to deny the massive impact the adult website industry has had on pushing the web forward. From pushing the browser's video limits to pushing ads through WebSocket so ad blockers don't detect them, you have...

  • By
    Send Text Messages with PHP

    Kids these days, I tell ya.  All they care about is the technology.  The video games.  The bottled water.  Oh, and the texting, always the texting.  Back in my day, all we had was...OK, I had all of these things too.  But I still don't get...

Incredible Demos

  • By
    Digg-Style Dynamic Share Widget Using the Dojo Toolkit

    I've always seen Digg as a very progressive website. Digg uses experimental, ajaxified methods for comments and mission-critical functions. One nice touch Digg has added to their website is their hover share widget. Here's how to implement that functionality on your site...

  • By
    MooTools History Plugin

    One of the reasons I love AJAX technology so much is because it allows us to avoid unnecessary page loads.  Why download the header, footer, and other static data multiple times if that specific data never changes?  It's a waste of time, processing, and bandwidth.  Unfortunately...

Discussion

  1. Nice and simple. Just the way I like it!

  2. I think your header there is a touch misleading. Nothing in that code snippet requires moo unless ondragstart is a MooTools added event.

    The MooTools version I imagine would look something like..

    window.addEvent('dragstart',function(e) { if(e) { var evt = new Event(e).stop(); } });
    

    just my two bits.

  3. @David Nice tip – short, but useful!

    @Bryan – You are correct…

    document.ondragstart is actually a JScript (Microsoft) only method. I am pretty certain it is not defined in the ECMAScript documentation. David’s script will work just fine in non MS browsers too, though, since JavaScript allows object augmentation. In non MS browsers, this script will simply add a new method object to the document object – which is mostly inconsequential. I suppose if you’re concerned about modifying the document hash, you could always try something like this:

    if(document.ondragstart)
    {
    document.ondragstart = function() { return false; };
    }

  4. Thanx a lot for the tip it helped me a lot !

    J

  5. Callum Johnson

    Im trying to prevent a component of my navi bar to not be dragged.

    I’m using:

    //Home Button
    function mouseOverHome()
    {
    document.getElementById("home").src ="images/navigation bar/homeOUT.jpg";
    document.ondragstart = function () { return false; };
    }
    function mouseOutHome()
    {
    document.getElementById("home").src ="images/navigation bar/home.jpg";
    document.ondragstart = function () { return false; };
    }
    

    So why does this not prevent the image from being dragged in FF?

  6. Eric

    Thank you for this concise and helpful tidbit. It saved me additional searching. For those looking to inhibit dragging behavior on a individual element (an image in this example) rather than the whole document, try:  <img src=”blah.jpg” ondragstart=”return false” />

  7. Thank you! Finally a solution that is simple, and works on all browsers!

  8. Hey I have the solution that all browsers work with… doesn’t work for firefox if you have a lot of code so I came up with this. By adding an “!important” statement it tells it that it is the most important code to find so it refers to it before everything else:

    Also prevents right clicking and makes it un-selectable.

  9. We had this enabled in a .js file then had each page call on the file. It worked great but now we noticed one site copied an entire page of ours so we tried to do it our self in IE9 and was able to copy the same info.

    Does that mean IE9 now ignores it or is there a bug in IE9?

  10. Developer

    Please give me an example. GitHub or empty page.

    Case:

    I have two pages (in a different windows, for ex: ie 10)
    1 page with code document.ondragstart = function(){return false;}; (or other event)
    2d page with img

    then i drag image to first window.

    Result your method does not work.

  11. Luke

    Same here – it seems this method doesn’t work in any browser, not even IE11. Dragging and dropping image results in leaving page and going to image file. Anyone know of a workaround?

Wrap your code in <pre class="{language}"></pre> tags, link to a GitHub gist, JSFiddle fiddle, or CodePen pen to embed!