移动设备上的 HTML 拖放

IT技术 javascript html jquery-ui mobile-devices
2021-03-07 23:02:47

当您使用 JavaScript（例如 jQuery UI 可拖放和可拖放）向网页添加拖放功能时，如何在移动设备上通过浏览器查看时使其工作 - 其中拖放的触摸屏操作被拦截用于滚动页面等的电话？

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

  1. 有一个用于移动设备的按钮，可以“抬起”要拖动的项目，然后让它们单击要放置项目的区域。

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

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

6个回答

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

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

http://touchpunch.furf.com/

@vichsu 非常感谢这个答案，它完美地解决了我的问题。
2021-04-22 23:02:47
真的不能在 android 4.0 中工作 .. 或者有什么解决办法吗？
2021-04-23 23:02:47
确保将其设为 html 文件头部的最后一个 <script> 声明，尤其是 jquery-ui，否则将无法工作
2021-05-03 23:02:47
我们在拖动之前先长按吗？因为当我们在可以拖动的元素中使用全宽时，我们希望滚动到底部它会自动拖动元素
2021-05-06 23:02:47
不适用于现有的 Android 4.0 浏览器。不过，它确实适用于移动 Chrome。
2021-05-15 23:02:47

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

这个 polyfill 是 Bernardo Castilho 在这篇文章中介绍的。

这是该帖子的演示。

这篇文章还介绍了 folyfill 设计的几个注意事项。

没有在移动设备上工作
2021-04-26 23:02:47

我需要创建一个适用于台式机、移动设备、平板电脑（包括 Windows 手机）的拖放 + 旋转功能。最后一个使它变得更加复杂（mspointer 与触摸事件）。

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

使同一个对象可拖动和旋转需要一些跳跃，但它工作得很好

我回答这个问题已经 6 年了。我不确定他们是否更改了许可证类型。它曾经在 2014 年是免费的......
2021-04-18 23:02:47
许可证类型？自由？我查看了该网站，但似乎他们正在出售图书馆。
2021-04-20 23:02:47
IDK 我是如何忽略这一点的，但是greensock.com/licensing
2021-04-22 23:02:47
基本上，它是免费的，前提是您的产品是免费的（他们允许一次性收费除外），否则，您必须获得他们的营业执照。
2021-05-04 23:02:47

Sencha Touch的测试版支持拖放。

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

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

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

好吧，我可能不会特别使用那个库（缩小后超过 200k），但我可以使用其中包含的概念来获得这种想法。一般的想法是你让你的页面不能被解释为大于屏幕的大小，这会欺骗移动浏览器不拦截滑动/拖动！
2021-04-22 23:02:47
这很有趣，所以我将下载它并进行播放 - 在 Android 上测试并且它大部分都有效，所以只需要查看细节 - 谢谢！
2021-04-26 23:02:47
Sohnee，我们正在为 Touch 1.0 添加一个构建器，它可以去除库中未使用的部分，这将大大减少占用空间。此外，压缩后的完整库为 50-80k。
2021-05-09 23:02:47

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

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

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

效果很好，来源在这里：github.com/timruffles/mobile-drag-drop
2021-04-23 23:02:47
已尝试通过拖放 polyfill在移动设备上模拟 Web 应用程序行为，但它根本不起作用。
2021-05-01 23:02:47
其它你可能感兴趣的问题
上一篇每秒更新一次 React 组件 下一篇设置函数参数的类型？