输入和文本区域可以拖动吗？答案

【问题标题】：Can inputs and textareas be draggable?输入和文本区域可以拖动吗？
【发布时间】：2014-03-22 22:02:29
【问题描述】：

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

例如，使用以下代码：

<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 的可拖动属性拖动输入？如果没有，有没有我可以使用的解决方法？

【问题讨论】：

您是否尝试过在输入框周围放置一个带有一些填充的 Div？那么外部 div 可能是可拖动的对象？
如果你使用 JS 来阻止鼠标按下事件的传播。
你的意思是可以拖拽到输入框的内容吗？或者拖动输入框在屏幕周围重新定位？
@MathewFoscarini 好主意 - 我刚刚尝试过 - 但不幸的是它没有用。还是谢谢！
@james（你的第二条评论）我的意思是能够将输入框拖到其他元素中，以便重新定位它。我的意思不是像position: fixed 中那样可拖动——我的意思是当你把它放到另一个 HTML 元素中时，普通的旧式拖放。该部分适用于除输入和文本区域之外的所有其他元素。

标签： javascript html draggable

【解决方案1】：

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

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

【讨论】：

使用 ondragstart 也无法正常工作 - 这是一个 JSFiddle：jsfiddle.net/ttfrk/3

【解决方案2】：

就像很多事情一样，JavaScript 可以实现！

一个很棒的库是draggable.js(http://gtramontina.github.io/draggable.js/)

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

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

您可以在 document.getElementsByClassName 上使用 for 循环并这样做。

【讨论】：

我想使用 draggable 属性将元素拖到其他元素中，因此 draggable.js 将不起作用（基于我尝试将它与 position: relative 一起使用）

【解决方案3】：

好的，所以我已经尝试了所有的解决方案和 cmets，结果证明唯一的方法是创建一个 div，其中包含 @james 在评论中所说的其他元素。

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

到目前为止，我测试的主流浏览器都没有支持可拖动的 <input> 或 <textarea> 元素，只有属性（并且没有附件 div）。

规范 (http://www.whatwg.org/specs/web-apps/current-work/multipage/dnd.html#the-draggable-attribute) 在这个问题上特别沉默。

【讨论】：

任何jsfiddle？我尝试用 div 包装我的输入，但仍然无法拖动

【解决方案4】：

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

我明白你对 disabled 属性的要求，但我认为这是关于行为的一致性，即使输入没有通过鼠标点击吸收焦点，可拖动对象也不起作用。

【讨论】：