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.

view plain print about
1.no-drag{
2 -webkit-user-drag: none;
3}

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

Apply it to your imagE:

view plain print about
1<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.

view plain print about
1<img src="something" class="no-drag" draggable="false"/>

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