HTML5 draggable='false' not working in Firefox browser

draggable div html5
html5 drag and drop grid
drag and drop html5 editor
html5 drag and drop list example
html5 drag and drop file upload
drag and drop javascript demo
html draggable
html5 drag and drop multiple elements

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 selecting that image able to drag and drop. 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'm having Firefox latest version: 32.0.3

Google a lot but didn't find any better solution. Is there any solution for this without using JavaScript? Any help would be appreciated.

Thanks

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>

HTML Drag and Drop API, The HTML5 Drag and Drop (DnD) API means that we can make almost any element on our page draggable. In this post we'll explain the basics� The draggable global attribute is an enumerated attribute that indicates whether the element can be dragged, either with native browser behavior or the HTML Drag and Drop API. draggable can have the following values: true: the element can be dragged. false: the element cannot be dragged.

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)"

Using the HTML5 Drag and Drop API, Drag and Drop (DnD) is powerful User Interface concept which makes it easy to copy, reorder and deletion of items with the help of mouse clicks. This allows the � The draggable attribute specifies whether an element is draggable or not. Tip: Links and images are draggable by default. Tip: The draggable attribute is often used in drag and drop operations. Read our HTML Drag and Drop tutorial to learn more.

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.

HTML5 - Drag & drop, HTML5 allows you to make any element draggable, allowing you to pick it up with your cursor and drag it to a different location which is defined� HTML Character Sets HTML ASCII HTML ANSI HTML Windows-1252 HTML ISO-8859-1 HTML Symbols HTML UTF-8 Exercises HTML Exercises CSS Exercises JavaScript Exercises SQL Exercises PHP Exercises Python Exercises jQuery Exercises Bootstrap Exercises Java Exercises C++ Exercises C# Exercises

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

HTML5 Drag and Drop: Drag and Drop Coding Tutorial For Beginners, In this tutorial, we will build a drag-and-drop example using the HTML Drag and Drop API with vanilla JavaScript to use the event handlers. A common gesture we use all the time and take for granted is the ability to drag an element around on screen. Despite how common this drag gesture is, there is no good built-in support for making an element draggable on the web. This is doubly-so if we wish to go beyond the mouse and support things like touch! That's where this tutorial comes in.

How To Create Drag and Drop Elements with Vanilla JavaScript and , To make an element draggable is simple: give the element a draggable attribute, and set an event listener for dragstart that stores the data being dragged. The� The HTML5 draggable data is specified by attaching an event handler to the dragover event. Elements and data cannot be dropped in other elements by default. This means you have to stop the element's default behavior using the event.preventDefault () method:

7.7 Drag and drop — HTML5, The HTML5 drag and drop feature allows the user to drag and drop an element to another location. The drop location may be a different application. To make other types of content draggable you need to use the HTML5 DnD APIs. To make an object draggable set draggable=true on that element. Just about anything can be drag-enabled, images, files, links, files, or any markup on your page. In our example we're creating an interface to rearrange some columns, which have been laid out with CSS Grid.

How to Use HTML5 Drag and Drop Feature, What happens when an element is dragged? Once you have a draggable element, you can call an ondragstart event handler and pass it a� Now HTML 5 came up with a Drag and Drop (DnD) API that brings native DnD support to the browser making it much easier to code up. HTML 5 DnD is supported by all the major browsers like Chrome, Firefox 3.5 and Safari 4 etc.

Comments
  • Unfortunately even people writing standards are not comprehending direct logic and are instead using implied logic. So it's wrongly intended as a existential boolean, not a boolean. Regardless of the value if the attribute exists it is considered true. That means draggable="true" (instead of draggable="draggable" is technically correct by definition even though a lot of people argue otherwise because language when correctly interpreted is an oversimplified version of math. In short: if you do not want the effect of the attribute simply do not add the attribute.
  • This does not work any more, see James Morrison's answer.
  • Applied as suggested CSS but still able to drag. See updated jsfiddle
  • @Sandeep: You have to add class to image. See the updated answer.
  • Did you check my updated Jsfiddle code? Plz see that. Already added but still not working.
  • That class was already added and now you added one more times.