输入和文本区域可以拖动吗? [英] Can inputs and textareas be draggable?

查看:103
本文介绍了输入和文本区域可以拖动吗?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

MDN,规范以及我在Google上可以找到的每个网站都说,所有HTML元素都是可拖动的。但是,实际上,我发现即使禁用了文本输入或文本区域,我也无法将其拖动。

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.

例如,使用以下代码:

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

这里是 JSfiddle

是否可以使用HTML5 draggable属性来拖动输入?如果没有,我可以使用一种解决方法吗?

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

推荐答案

好的,所以我尝试了所有解决方案和评论,事实证明,这样做的唯一方法是使div保留注释中@james之类的其他元素。

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.

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

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.

我测试过的主流浏览器都不支持可拖动的< input> < textarea> 元素,截至目前,该元素仅具有属性(且没有附件div)。

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

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

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

这篇关于输入和文本区域可以拖动吗?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆