HTML5 draggable='false' not working in Firefox browser
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>
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)"
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.