触控设备上的可拖动属性

Posted 2023-05-08

【中文标题】触控设备上的可拖动属性

【英文标题】：Draggable attribute on touch devices

【发布时间】：2017-01-16 22:36:02

【问题描述】：

draggable 属性似乎在触摸设备上的浏览器中无效。

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

https://jsfiddle.net/41z5uz4t/

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

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

【参考方案1】：

可拖动属性是“experimental technology”，目前任何主流移动浏览器都不支持它。

如果您想制作 Drag'n'Drop UI，您应该为此使用一些 JS 库，例如 greensock nice library 和 Touchpunch with jQuery UI，还有更多内容，只需在网络上搜索即可。

我要明确指出，目前主流移动浏览器不支持可拖动属性。

编辑：

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

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

找到here。

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

【讨论】：

我问的不是移动浏览器，我问的是带触控功能的桌面浏览器。

您链接的库的行为无法正确模拟浏览器的 draggable 行为。

不幸的是，该设置对我的系统没有影响。

【参考方案2】：

你可以使用jQuery来实现这个效果。以下是如何做到这一点的指南：

http://touchpunch.furf.com/

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

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

【讨论】：

这不是浏览器中draggable 提供的真正行为。我想我只需要编写自己的 polyfill。