HTML在移动设备上的拖放

89

当您使用JavaScript将网页拖放到jQuery UI（例如可拖放的jQuery UI）上时，如何通过移动设备上的浏览器查看，使该按钮正常工作-触摸屏上的拖动操作被拦截翻页等手机？

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

有一个用于移动设备的按钮，可“举起”要拖动的项目，然后让他们单击要放置项目的区域。
编写一个针对移动设备执行此操作的应用程序，然后尝试使网页在其上运行！
请提出您的建议和意见。

— 芬顿
source

您定位到哪些设备？

— Marko

22

@Marko-全部。如果我排除任何人，那不是Web。

— Fenton 2012年

如果您根本不想要jQuery，请查看以下github.com/capriza/mobile-touch

— oriharel

101

jQuery UI Touch Punch可以解决所有问题。

这是对jQuery UI的触摸事件支持。基本上，它只是将触摸事件连接回jQuery UI。在iPad，iPhone，Android和其他支持触摸功能的移动设备上进行了测试。我使用了可排序的jQuery UI，它的工作原理很吸引人。

http://touchpunch.furf.com/

— 维奇苏
source

4

在现有的Android 4.0浏览器上不起作用。它确实可以在移动Chrome上运行。

— Timmmm 2012年

拖动之前我们长按第一吗？因为当我们在能够拖动的元素中使用完整宽度时，我们想滚动到底部，它会自动拖动元素

— CaffeineShots 2014年

1

请务必使这个你最后的<script>在HTML文件的头部声明，尤其是jQuery的UI，否则将无法正常工作

— whyoz

@vichsu非常感谢您的回答，这完全解决了我的问题。

— Brady Zhu

真的不能在android 4.0中工作..还是有任何解决方法？

— rashidnk

23

有一个新的polyfill用于将触摸事件转换为拖放操作，因此HTML5拖放操作可在移动设备上使用。

polyfill由Bernardo Castilho在此职位上介绍。

这是该帖子的演示。

该帖子还介绍了folyfill设计的一些注意事项。

— Remdevtec
source

7

Beta版本的Sencha Touch具有拖放支持。

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

将这种逻辑改造成网页可能会很困难。据我了解，它们会禁用所有浏览器平移，并完全使用javascript实现平移事件，从而可以正确解释拖放。

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

— 乔里·塞布雷希茨（Joeri Sebrechts）
source

这非常有趣，因此我将下载它并进行播放-在Android上经过测试，并且该播放器大多数都可以使用，因此只需要查看详细信息-谢谢！

— Fenton

6

好的，我可能不会特别使用该库（缩小后的库超过200k），但是我可以使用其中包含的概念来获得这种想法。通常的想法是，您不能将页面解释为大于屏幕大小，这会愚弄移动浏览器不拦截滑动/拖动！

— Fenton 2010年

1

Sohnee，我们为Touch 1.0添加了一个构建器，该构建器会删除库中未使用的部分，这将大大减少占用空间。另外，压缩后，完整库为50-80k。

— Michael Mullany

7

我需要创建一个可以在台式机，手机，平板电脑（包括Windows Phone）上运行的拖放+旋转。最后一个使它变得更复杂（mspointer与touch事件）。

解决方案来自伟大的Greensock库

花了一些时间从箍上跳下来，使同一对象可拖动和旋转，但效果很好

— 托默·阿尔莫格
source

许可证类型？自由？我检查了该网站，但似乎他们正在出售图书馆。

— ShanerM13

我回答这个问题已有6年了。我不确定他们是否更改了许可证类型。2014年以前是免费的...

— Tomer Almog

IDK我如何忽略了这一点，但是greensock.com/licensing

— ShanerM13

基本上，它是免费的，但前提是您的产品是免费的（除非它们允许一次性收费），否则，您必须随其获得营业执照。

— ShanerM13

3

您不妨尝试一下Tim Ruffle的拖放式polyfill，它肯定类似于Bernardo Castilho的（参见@remdevtec答案）。

只需完成npm install mobile-drag-drop --save（可用其他安装方法，例如凉亭）

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

— 冷淡的Z
source

1

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') {

为要“解锁”的每个元素添加任意数量的ors

希望可以帮助某人

— 泰德贝克
source

它无疑对我有帮助，谢谢。我正在创建一个可排序的核对清单，并且勾选框未单击，因为touch-punch创建的div覆盖了该复选框。这解决了它，并且起作用了。感谢....

— Mikeys4u

1

这是我的解决方案：

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

— 阿尔珀·艾丁格尔
source

1

在可排序的JS库是具有触摸屏的兼容，不需要jQuery的。

它处理触摸屏的方式是您需要触摸屏幕约1秒钟才能开始拖动项目。

此外，他们还提供了视频测试，表明该库的运行速度比JQuery UI Sortable快。

— 佐普
source