Can inputs and textareas be draggable?

Question

MDN, the spec, and every site I can find with Google says that all HTML elements can be draggable. However, in practice I find that I can't drag text inputs or textareas, even if they're disabled.

For example, with the following code:

<img src="http://www.placehold.it/350x150" draggable alt="Placeholder image">

<a href="http://example.com" draggable>Link</a>

<input type="text" draggable>
<input type="text" disabled draggable>

I can drag the image and the link, but neither of the inputs can be dragged.

Here's a JSfiddle

Is it possible to drag inputs using the HTML5 draggable attribute? If not, is there a workaround I could use?

Answer 1

Okay, so I've tried all the solutions and comments and it turns out that the only way to do it is to make a div that holds the other elements like @james said in a comment.

Since all elements are supposed to be draggable according to the spec, I'm guessing that the rationale for not including draggable support for inputs is because they are supposed to grab focus automatically onclick. I'd be curious to see what the real rationale was, so I may open a bug with Firefox.

No major browser that I tested supports draggable <input> or <textarea> elements with only the attribute (and no enclosure div) as of right now.

The spec (http://www.whatwg.org/specs/web-apps/current-work/multipage/dnd.html#the-draggable-attribute) is notably silent on this issue.

Answer 2

MDN confirms that draggable is a global attribute (i.e. can be applied to any element), but has the following usage note:

By default, only text selections, images, and links can be dragged. For all others elements, the event ondragstart must be set in order to the drag and drop mechanism to work, as shown in this comprehensive example.

Answer 3

Like many things, it's possible with JavaScript!

A great library is draggable.js( http://gtramontina.github.io/draggable.js/ )

I've made an example here: http://jsfiddle.net/ttfrk/1/ For simplicity, I used an id.

draggable( document.getElementById('draggable') );

You could use a for loop on document.getElementsByClassName and do it that way though.

Answer 4

I don't think that's possible, as inputs are supposed to entirely capture (focus) on the mouse click.

I get what you're going after with the disabled attribute, but I think it's about consistency in behaviour that the draggable doesn't work even when the input is not absorbing the focus with mouseclick.