HTML5 draggable = 'false' does not work in Firefox browser

Question

I am just trying to apply the HTML5 attribute draggable = 'false' to some images, but it does not work in Firefox browser. It works fine in Chrome, but in Firefox, you can drag and drop after selecting this image . Sample code can be seen here:

<div id="dnd"> <textarea placeholder="drop here"></textarea> <img src="http://johnlewis.scene7.com/is/image/JohnLewis/231108668?$prod_main$" draggable='false'/> </div> 

Jsfiddle

I have the latest version of Firefox: 32.0.3

Google a lot, but did not find a better solution. Is there a solution for this without using JavaScript? Any help would be greatly appreciated.

thanks

Answer 1

just try this

add ondragstart = "return false;" to your html element

 <div id="dnd"> <textarea placeholder="drop here"></textarea> <img src="http://johnlewis.scene7.com/is/image/JohnLewis/231108668?$prod_main$" draggable='false' ondragstart="return false;"/> </div> 

Answer 2

The update is kind, the solution does not work with React, however the addition below does.

 onDragStart={(e) => { e.preventDefault() }} 

EDIT: returning false for ondragstart no longer works for more modern versions of Firefox (credit: Hooman Askari), in this case use below.

 function dragStart(e) { e.preventDefault() } 

... and on the element

 ondragstart="dragStart(e)" 

Answer 3

The best solution I have found is to restrict the style property to an element or textarea element using css ...

element:

 <textarea id="myTextArea" style="resize: none" type="text" title=""></textarea> 

or

css: this of course will affect all textarea elements

 textarea { resize: none; } 

Credit to these people.

https://www.tutorialrepublic.com/faq/how-to-disable-resizable-property-of-textarea-using-css.php

Answer 4

You can set the following CSS properties for the image:

 .unselectable { /* For Opera and <= IE9, we need to add unselectable="on" attribute onto each element */ /* Check this site for more details: http://help.dottoro.com/lhwdpnva.php */ -moz-user-select: none; /* These user-select properties are inheritable, used to prevent text selection */ -webkit-user-select: none; -ms-user-select: none; /* From IE10 only */ user-select: none; /* Not valid CSS yet, as of July 2012 */ -webkit-user-drag: none; /* Prevents dragging of images/divs etc */ user-drag: none; } 

HTML code:

 <img src="something.jpg" class="unselectable"> 

Fiddle