Prevent Internet Explorer’s Default Image Dragging Action

Prevent Internet Explorer’s Default Image Dragging Action

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.

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

Removing default image drag behaviour

In newer browsers, when you start dragging an image, a default behaviour is triggered, so you can drag the image ex. to the desktop or whereever you want. Firefox, Opera, and Chrome does this, and also Internet Explorer 8. As anyone could guess, problems start with the latter.

I wanted to create a solution where the user can drag and drop objects around, and of course in this case it is not allright when the browser overrides my event handlers with its default one.

In standards-compliant browsers the solution is easy, the Event object has a method called preventDefault(), and when you call it in the 'onmousedown' event handler, this default behaviour is cancelled. I was not really surprised when it was only IE8 where it did not work. Well, in IE the Event object has no preventDefault() method, IE uses a boolean property called returnValue. I tried that one, nothing changed.

I spent some time googling about this, no results. Then in MSDN I found out that IE has a special event, called 'ondragstart' , and I already knew that this is the solution (Safari seems to support this event too). So in an 'ondragstart' event handler you have to set returnValue to false, and you are done.