HTML拖放移动设备

Question

当您使用JavaScript添加拖放到网页时,例如jQuery UI draggable和droppable,当通过移动设备上的浏览器查看时,如何使其工作 - 拖动的触摸屏操作被拦截手机滚动页面等？

欢迎所有解决方案......我最初的想法是:

1. 有一个移动设备按钮,可以"提升"要拖动的项目,然后让他们单击要放置项目的区域.

2. 编写一个应用程序,为移动设备执行此操作,而不是尝试让网页上的工作!

3. 请您提出建议和意见.

Answer 1

jQuery UI Touch Punch正好解决了这一切.

这是jQuery UI的触摸事件支持.基本上,它只是将触摸事件连接回jQuery UI.在iPad,iPhone,Android和其他支持触控的移动设备上进行测试.我使用jQuery UI进行排序,它就像一个魅力.

http://touchpunch.furf.com/

Answer 2

有一个新的polyfill用于将触摸事件转换为拖放,这样HTML5拖放就可以在移动设备上使用.

Bernardo Castilho在这篇文章中介绍了polyfill .

这是该帖子的演示.

该帖子还介绍了folyfill设计的几个注意事项.

Answer 3

Sencha Touch的测试版具有拖放支持.

您可以参考他们的DnD示例.这只适用于webkit浏览器.

将该逻辑改造成网页可能会很困难.据我了解,他们禁用所有浏览器平移并完全在javascript中实现平移事件,允许正确解释拖放.

更新:原始示例链接已死,但我发现了这个替代方案:https:
//github.com/kostysh/Drag-Drop-example-for-Sencha-Touch

Answer 4

我需要创建一个拖放+旋转,适用于台式机,手机,平板电脑,包括Windows手机.最后一个使它更复杂(mspointer与触摸事件).

解决方案来自伟大的Greensock图书馆

它需要一些跳跃的箍来使相同的物体可以拖动和旋转,但它完美地工作

Answer 5

Sortable JS 库与触摸屏兼容，不需要 jQuery。

库大小为 43KB。

官网在视频中表示，这个库的运行速度比 JQuery UI Sortable 更快。

Answer 6

您不妨尝试一下Tim Ruffle 的拖放 polyfill，当然与Bernardo Castilho的类似（请参阅 @remdevtec 答案）。

简单地做npm install mobile-drag-drop --save（可以使用其他安装方法，例如使用凉亭）

然后，任何依赖于触摸检测的元素界面都应该在移动设备上工作（例如，仅拖动元素，而不是同时滚动+拖动）。