Question

MDN，规范以及我在Google上找到的每个网站都说可以拖动所有HTML元素。但是，在实践中，我发现我无法拖动文本输入或textareas，即使它们已被禁用。

例如，使用以下代码：

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

我可以拖动图像和链接，但不能拖动任何输入。

这里是JSfiddle

是否可以使用HTML5 draggable属性拖动输入？如果没有，我可以使用吗？

Answer 1

MDN确认draggable is a global attribute（即可以应用于任何元素），但具有以下使用说明：

默认情况下，只能拖动文本选择，图像和链接。对于所有其他元素，必须按顺序设置事件ondragstart 使拖放机制工作，如图所示 comprehensive example

Answer 2

与许多事情一样，使用JavaScript也可以！

一个很棒的图书馆是draggable.js（http://gtramontina.github.io/draggable.js/）

我在这里做了一个例子：http://jsfiddle.net/ttfrk/1/ 为简单起见，我使用了id。

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

你可以在document.getElementsByClassName上使用for循环，然后就这样做。

Answer 3

好的，所以我已经尝试了所有的解决方案和评论，事实证明，做到这一点的唯一方法是制作一个包含其他元素的div，如@james在评论中说的那样。

由于所有元素都应该根据规范进行拖动，我猜测不包括可拖动支持输入的理由是因为它们应该自动获取焦点。我很想知道真正的理由是什么，所以我可能会用Firefox打开一个错误。

我测试的主要浏览器都没有支持可拖动的<input>或<textarea>元素，只包含属性（并且没有封装div）。

规范（http://www.whatwg.org/specs/web-apps/current-work/multipage/dnd.html#the-draggable-attribute）在这个问题上显然是无声的。

Answer 4

我不认为这是可能的，因为输入应该完全捕获（聚焦）鼠标点击。

我使用disabled属性得到你正在追求的东西，但我认为即使输入没有通过鼠标点击吸收焦点，可拖动也不起作用的行为一致性

输入和textareas可以拖动吗？

4 个答案: