Skip to the content...

Welcome to the David Walsh Blog. I'm a MooTools, Dojo, jQuery, CSS, and PHP Web Developer located in Madison, Wisconsin, United States. Please contact me if I can make your experience on my website better.

Prevent Internet Explorer’s Default Image Dragging Action

8 Responses »

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!

Discussion

  1. May 16, 2008 @ 10:44 am

    Nice and simple. Just the way I like it!

  2. May 16, 2008 @ 12:03 pm

    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. May 16, 2008 @ 3:38 pm

    @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. July 24, 2008 @ 6:05 am

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

    J

  5. callum johnson
    March 27, 2009 @ 1:17 pm

    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
    April 28, 2009 @ 9:42 am

    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” />

Be Heard!

Share your thoughts with fellow developers of all skill levels! I want to hear from you!

Name*:
Email*:
Website:  
Wrap your code with <code> tags, f00!