HTML拖放在移动设备上

当您使用JavaScript（例如jQuery UI可拖放和可拖放）将JavaScript拖放到网页上时，如何通过移动设备上的浏览器查看时如何使其工作 – 拖动的触摸屏操作被截取手机滚动页面等？

所有的解决scheme欢迎…我最初的想法是：

  1. 为移动设备提供一个button，用于“抬起”要拖动的项目，然后让它们单击要删除项目的区域。

  2. 写一个应用程序，这样做的移动设备，而不是试图让网页上工作！

  3. 你的build议和意见请。

更新：赏金

如果有人能够告诉我如何在移动设备的网页上进行拖放工作，而不是诉诸于上面的第一点和第二点，那么我将为您的方式摆出50代表的美妙赏金！

jQuery UI Touch Punch只是解决了这一切。

这是一个触摸事件支持jQuery UI。 基本上，它只是将触摸事件连接到jQuery UI。 在iPad，iPhone，Android和其他支持触摸的移动设备上进行testing。 我用jQuery UIsorting，它像一个魅力。

http://touchpunch.furf.com/

对于自2017年以来阅读此文的用户，有一个新的用于将触摸事件转换为拖放的polyfill，使得HTML5 Drag And Drop可以在移动设备上使用。

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

这是来自该post的演示 。

这篇文章也提出了几个关于叶面devise的考虑。

Sencha Touch的testing版具有拖放支持。

你可以参考他们的DnD示例 。 顺便说一句，这只适用于webkit浏览器。

把这个逻辑改写成一个网页可能会很困难。 据我了解，他们禁用所有的浏览器平移和完全在JavaScript中实施平移事件，允许正确的解释拖放。

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

我需要创build一个拖放和旋转，适用于桌面，手机，平板电脑，包括Windows手机。 最后一个使它更复杂（mspointer与触摸事件）。

解决scheme来自伟大的Greensock图书馆

它花了一些跳跃，使同一个对象可以拖动和旋转，但它完美的作品

Jquery Touch Punch很棒，但是它也会禁用可拖动div上的所有控件，所以为了防止这种情况发生，你必须改变这些行…（在写作时，第75行）

更改 

if (touchHandled || !self._mouseCapture(event.originalEvent.changedTouches[0])){

读书 

 if (touchHandled || !self._mouseCapture(event.originalEvent.changedTouches[0]) || event.originalEvent.target.localName === 'textarea' || event.originalEvent.target.localName === 'input' || event.originalEvent.target.localName === 'button' || event.originalEvent.target.localName === 'li' || event.originalEvent.target.localName === 'a' || event.originalEvent.target.localName === 'select' || event.originalEvent.target.localName === 'img') {

添加尽可能多的或你想要的每个要“解锁”的元素

希望能帮助别人

这里是我的解决scheme： 

 $(el).on('touchstart', function(e) { var link = $(e.target.parentNode).closest('a') if(link.length > 0) { window.location.href = link.attr('href'); } });
Interesting Posts