在移动设备上拖放 HTML

Question

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

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

1. 为移动设备提供一个按钮，可以“举起”要拖动的项目，然后让他们单击要放置项目的区域。

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

   编写一个为移动设备执行此操作的应用程序，而

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

Answer 1

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

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

http://touchpunch.furf.com/

Answer 2

有一个 Polyfill 用于将触摸事件转换为拖放，以便 HTML5 拖放可在移动设备上使用。

该polyfill 由 Bernardo Castilho 在

这是该帖子的演示。

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

Answer 3

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

解决方案来自伟大的 Greensock 库

它需要一些跳跃才能使同一个对象可拖动并且可旋转，但效果很好

Answer 4

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

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

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

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

Answer 5

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

库大小为 43KB。

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

Answer 6

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

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

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

Answer 7

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

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

希望对某人有帮助

Answer 8

这是我的解决方案：

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

Answer 9

对于 vue 3，有 https://github.com/SortableJS/vue.draggable.next< /a>

对于 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