HTML5 draggable='false' not working in Firefox browser

Question

I\'m simply trying to apply HTML5 draggable=\'false\' attribute to some images but it\'s not working in Firefox browser. In Chrome working fine but on Firefox, after sele

Answer 1

You can set the following CSS properties to 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

Answer 2

Update of James Morrison's update: even the newer version doesn't seem to work anymore.

I could sort out a similar issue with a check inside the addEventListener("dragstart",...) which you probably need to set in case you are playing with drag & drop. In my case:

document.addEventListener("dragstart", function( event ) {
    if (event.target.parentNode.localName == 'li') {
      // console.log("In case it's inside a <li> element, prevent the drag");
      event.preventDefault();
    } else {
      // code taken from a Mozilla example, replace with what you need:
      // store a ref. on the dragged elem
      dragged = event.target;
      // make it half transparent
      event.target.style.opacity = .5;
    }
}, false);

To check for an <img> the check would look something like if (event.target.localName == 'img') {...

As per the OP request: all of the "html only" solutions I have tried were not working.

Answer 3

Update of sorts, the solution doesn't work with React, however adding the below does.

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

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

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

...and on the element

ondragstart="dragStart(e)"

Answer 4

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>