html - 触控设备上的可拖动属性

Question

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

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

https://jsfiddle.net/41z5uz4t/

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

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

Answer 1

Draggable 属性是“实验性技术”，目前任何主流移动浏览器都不支持它。

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

我将明确表示目前主流移动浏览器不支持可拖动属性。

编辑：

似乎它是 Chrome 中的错误与像你这样的触摸屏设备我找到了一个可能对你有帮助的解决方案：

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

在这里找到。

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

Answer 2

You can use jQuery to achieve this effect. Here is a guide on how to do that:

http://touchpunch.furf.com/

Put this code before the line with the draggable object:

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

And put this after the line with the draggable object:

<script>$('#draggablebox').draggable();</script>, assuming the div has the id draggablebox.