Question

使用JavaScript添加拖放到网页时，例如jQuery UI draggable和droppable，当通过移动设备上的浏览器查看时，如何使其工作 - 拖动的触摸屏操作是通过电话拦截滚动页面等？

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

为移动设备设置一个按钮，以“提升”要拖动的项目，然后让他们点击要删除该项目的区域。
编写一个为移动设备执行此操作的应用，而不是试着让网页对其进行操作！
请提出您的建议和意见。

Answer 1

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

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

http://touchpunch.furf.com/

Answer 2

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

由Bernardo Castilho在this post上介绍了polyfill。

这是该帖子中的demo。

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

Answer 3

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

您可以参考他们的DnD Example。这只适用于webkit浏览器。

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

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

Answer 4

我需要创建拖放+旋转，适用于台式机，手机，平板电脑，包括Windows手机。最后一个使它更复杂（mspointer与触摸事件）。

解决方案来自伟大的Greensock library

通过箍跳使得相同的物体可以拖动和旋转但是它完美地运行

Answer 5

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

希望能帮到某人

Answer 6

你不妨尝试一下Tim Ruffle's drag-n-drop polyfill，当然与 Bernardo Castilho 的相似（见@remdevtec回答）。

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

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

Answer 7

这是我的解决方案：

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

Answer 8

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

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

他们还展示了一个视频测试，表明该库的运行速度比JQuery UI Sortable快。

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

HTML拖放移动设备

9 个答案: