触摸设备上的可拖动属性

Question

draggable属性似乎对触摸设备上的浏览器没有影响。

<div draggable="true">Draggable Box</div>

用鼠标，我可以拖动这个元素。如果我尝试在触摸屏（Windows 10，Chrome）上拖动它，常规触摸事件（例如导航回来）似乎优先。我试着拿着它，然后拖着。这也不起作用。

是否有用于在Chrome中修复此行为的polyfill？我应该做些不同的事吗？

Answer 1

Draggable属性为“experimental technology”，目前在任何主流移动浏览器上都不支持。

如果你想制作一个Drag'n'Drop用户界面你应该使用一些JS库，比如，greensock nice library和Touchpunch with jQuery UI，还有更多只是在网上搜索。

我只是说清楚主流移动浏览器今天不支持可拖动属性。

编辑：

似乎Chrome与你的触摸屏设备有关，我找到了一个可能对你有帮助的解决方案：

转到chrome：// flags并将“启用触摸事件”设置从“自动”更改为“启用”。当前版本的Chrome显然无法检测到Windows 10的触控功能。

找到了here。

尽管如此，如果这是一个实验属性，您最好使用js库来执行该操作。

Answer 2

您可以使用jQuery来实现此效果。以下是如何执行此操作的指南：

将此代码放在可拖动对象的行之前：

<script src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
<script src="http://code.jquery.com/ui/1.8.21/jquery-ui.min.js"></script>

并把它放在可拖动对象的行之后：

<script>$('#draggablebox').draggable();</script>，假设div有id draggablebox。