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.
Using MooTools
document.ondragstart = function () { return false; };
Happy dragging and dropping!
Discussion
Be Heard!
Share your thoughts with fellow developers of all skill levels! I want to hear from you!
Nice and simple. Just the way I like it!
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.
@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; };
}
Thanx a lot for the tip it helped me a lot !
J
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?
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” />