4

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?

5
  • 1
    Have you tried putting a Div with some padding around the input box? Then the outer div could be the draggable oject?
    – james
    Commented Mar 22, 2014 at 22:10
  • Maybe if you used JS to stop the propagation of the mouse down event.
    – Reactgular
    Commented Mar 22, 2014 at 22:13
  • Do you mean to be able to drag to contents of the input box? Or drag the input box to reposition it around the screen?
    – james
    Commented Mar 22, 2014 at 22:14
  • @MathewFoscarini Good idea - I just tried that - but it unfortunately didn't work. Thanks anyway! Commented Mar 23, 2014 at 16:41
  • @james (your 2nd comment) I mean to be able to drag the input box into other elements, in order to reposition it. I don't mean draggable as in position: fixed - I mean the plain old drag and drop where when you drop it into another HTML element. That part works fine on all other elements except inputs and textareas. Commented Mar 23, 2014 at 16:43

4 Answers 4

3

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.

1
1

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.

1
  • I want to use the draggable attribute to drag elements into other elements, and thus draggable.js won't work (based on my attempts to use it with position: relative) Commented Mar 23, 2014 at 16:35
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.

1
  • Any jsfiddle? I tried wrapping my input's with a div and still not draggable
    – bryan
    Commented Jan 21, 2015 at 15:31
0

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.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.