Check out our Angular Book Series.

How can I prevent an image from being dragged in my browser?

I've been doing some work on an Angular project with Dragula. I disabled our draggable div under certain conditions, but our users were still able to drag an image that lied within the Dragula div. Dragula prevented the drop, so our data was not put in a comprimising state, but it was confusing to our users that they could drag soemthing and not drop it.

Once I disabled Dragula on the div, the users were making use of default browser functionality. How can I prevent that?

There doesn't seem to be an easy cross browser way to do it, so I had to implement a few solutions.

First, for Chrome, I was able to use some CSS.


.no-drag{
-webkit-user-drag: none;
}

This web kit specific CSS extension prevents the item from being dragged.

Apply it to your imagE:


<img src="something" class="no-drag" />

But that did not solve the issue in Firefox. To do that I had to add the draggable attribute.


<img src="something" class="no-drag" draggable="false"/>

At this point it worked in both Firefox and Chrome and I stopped testing.

Comments (Comment Moderation is enabled. Your comment will not appear until approved.)
Comments are not allowed for this entry.
All Content Copyright 2005, 2006, 2007, 2008, 2009 Jeffry Houser. May not be reused without permission
BlogCFC was created by Raymond Camden. This blog is running version 5.9.2.002.