移动设备上的HTML拖放

Question

当您使用JavaScript（例如jQuery UI draggable和droppable）在网页中添加拖放功能时，如何在移动设备上的浏览器中使其正常工作 - 在这种情况下，由于触摸屏幕操作用于滚动页面等，因此如何进行拖放操作？

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

1. 对于移动设备，可以设置一个按钮“提起”待拖动的对象，然后让用户单击要将该对象放置到的区域。
2. 编写一个专门针对移动设备的应用程序，而不是尝试在移动设备上运行网页！
3. 期待您的建议和评论。

- Fenton

---

你的目标设备是哪些？ - Marko

@Marko - 全部都需要包括。如果排除任何人，那就不是互联网了。请让我知道您是否需要翻译更多内容。 - Fenton

如果您完全不想使用jQuery，请查看此链接： https://github.com/capriza/mobile-touch - oriharel

提问于10年5个月前 活跃于1年2个月前 浏览了131k次 - Jason FB

在移动设备上，如果您想将元素拖到底部，页面为什么无法滚动呢？但在桌面端却可以正常工作。您知道原因吗？ - Vinodh Kumar C

如果下面的众多答案中有一个单一的讨论如何实现它而不是推广第三方库，那将非常好。并且回应@JasonFB的观点，在现在的2022年，令人惊讶的是仍然没有明确的答案。 - Emperor Eto

Answer 1

jQuery UI Touch Punch能解决所有问题。

它是jQuery UI的触摸事件支持。基本上，它只是将触摸事件连接回jQuery UI。 已在iPad、iPhone、Android和其他触摸设备上进行了测试。 我使用了jQuery UI sortable，效果非常好。

http://touchpunch.furf.com/

- vichsu

---

不适用于原生Android 4.0浏览器，但在移动版Chrome上可以使用。 - Timmmm

我们在拖动之前是否有长按操作？因为当我们在可拖动的元素中使用全宽度时，如果要滚动到底部，它会自动拖动该元素。 - CaffeineShots

请确保这是您在HTML文件头中的最后一个<script>声明，特别是jQuery-UI，否则它将无法正常工作。 - whyoz

那些不想使用jQuery UI因为它是一个庞大的库，只是为了处理触摸拖放的人怎么办？有没有替代方案？ - Kevin

touchpunch.furf.com出现404错误，解决方案失踪了。 - Bangyno

Answer 2

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

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

这里有一个来自该文章的演示。

该文章还介绍了几个关于polyfill设计的注意事项。

- guysigner

---

不支持使用移动设备，请勿在手机上操作 - Dima Malko

Answer 3

我需要创建一个可在桌面、移动设备、平板电脑和 Windows 手机上使用的拖放和旋转效果。最后一个设备让事情变得更加复杂（mspointer 与触摸事件）。解决方案来自于伟大的Greensock库。虽然需要一些费力才能使同一对象可拖拽和旋转，但它完美地工作了。

- Tomer Almog

---

许可证类型？免费的吗？我查看了网站，但似乎他们正在出售该库。 - Shmack

我回答这个问题已经有6年了。我不确定他们是否改变了许可证类型。在2014年之前，它曾经是免费的... - Tomer Almog

我不知道我怎么会忽略这个，但是https://greensock.com/licensing/。 - Shmack

基本上，只要你的產品是免費的（除了他們允許的一次性收費），那麼它就是免費的，否則你必須向他們取得商業許可證。 - Shmack

Answer 4

Sencha Touch的测试版现在支持拖放功能。

你可以参考他们的DnD Example。顺便说一下，这只适用于Webkit浏览器。

将该逻辑应用到网页中可能会很困难。据我所知，他们禁用了所有浏览器平移操作，并完全使用JavaScript实现平移事件，以允许正确解释拖放操作。

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

- Joeri Sebrechts

---

这非常有趣，我会下载并试玩一下 - 在Android上测试过，大部分都能正常运行，只需要看看细节 - 谢谢！ - Fenton

好的，我可能不会特别使用那个库（因为它经过压缩后大小超过了200k），但是我可以借鉴其中包含的概念来实现类似的功能。总体思路是让页面无法被解释为大于屏幕尺寸，这样就可以欺骗移动浏览器，使其无法拦截滑动操作！ - Fenton

Sohnee，我们正在为Touch 1.0添加一个构建器，用于剥离未使用的库部分，这将显著减小占用空间。此外，经过gzip压缩，完整的库大小为50-80k。 - Michael Mullany

Answer 5

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

库大小为43KB。

官方网站在视频中表示，此库运行速度比JQuery UI Sortable更快。

- Zoup

---

看起来这个似乎可以工作，尽管它更像是 Angular 10 的 CDK 拖放库。 - Wisarut Bholsithi

在 Android 9 上测试了 Firefox Nightly 92.0a1，似乎可以工作，但长按触发同时滚动和拖动，可能是因为长按通常用于文本选择。 - darw

在我看来，这个答案被低估了。这个库在Windows触摸屏上可以正常工作（而许多其他答案则不能），是开源/MIT协议的，并且附带了大量流行Web框架的示例和包。（react-sortablejs正是我所需要的） - TheHeadlessSourceMan

@Zoup，这是非常好的和有用的建议。 - Daniel Faure

Answer 6

您不妨尝试一下Tim Ruffle的拖放填充，它与Bernardo Castilho的填充类似（请参见@remdevtec答案）。

只需执行npm install mobile-drag-drop --save（还有其他安装方法，如使用bower），

那么，任何依赖于触摸检测的元素接口都应在移动设备上起作用（例如，仅拖动一个元素，而不是同时滚动+拖动）。

- Maxime Pacary

---

尝试使用拖放填充模拟在移动设备上的Web应用程序行为，但完全不起作用。 - Wisarut Bholsithi

它运行得很好，源代码在这里：https://github.com/timruffles/mobile-drag-drop - phil294

Answer 7

这是我的解决方案：

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

- Alper Aydingül

Answer 8

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

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

希望这能帮到某些人

- tedbaker

---

它肯定对我有帮助，谢谢。我正在创建一个可排序的清单，但勾选框无法点击，因为 touch-punch 创建的 div 遮盖了复选框。这解决了问题并且工作正常。谢谢... - Mikeys4u

Answer 9

对于 Vue 3，可以使用 https://github.com/SortableJS/vue.draggable.next。

对于 Vue 2，则可以使用 https://github.com/SortableJS/Vue.Draggable。

你可以像这样使用后者：

<draggable v-model="myArray" group="people" @start="drag=true" @end="drag=false">
   <div v-for="element in myArray" :key="element.id">{{element.name}}</div>
</draggable>

这些基于sortable.js

- cslotty