99

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

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

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

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

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

4

9 回答 9

102

jQuery UI Touch Punch 解决了这一切。

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

http://touchpunch.furf.com/

于 2012-05-11T16:56:04.613 回答
25

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

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

这是该帖子的演示。

这篇文章还提出了对 folyfill 设计的一些考虑。

于 2017-05-02T11:02:11.380 回答
9

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

解决方案来自 The Great Greensock library

使同一个对象可拖动和可旋转需要一些跳跃，但它完美地工作

于 2014-08-02T06:48:03.113 回答
7

Sencha Touch的测试版支持拖放。

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

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

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

于 2010-07-07T10:17:42.783 回答
4

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

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

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

于 2018-02-09T10:58:16.573 回答
4

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

库大小为 43KB。

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

于 2019-03-01T21:55:17.363 回答
2

这是我的解决方案：

$(el).on('touchstart', function(e) {
    var link = $(e.target.parentNode).closest('a')  
    if(link.length > 0) {
        window.location.href = link.attr('href');
    }
});
于 2017-08-09T08:07:39.710 回答
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

希望对某人有所帮助

于 2017-05-04T09:49:11.740 回答
0

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

于 2020-12-02T10:11:08.517 回答