移动设备上的HTML拖放

jqueryuitouchpunch解决了所有问题。

它是对jqueryui的触摸事件支持。基本上,它只是将touch事件连接回jqueryui。 在iPad、iPhone、Android和其他支持触摸的移动设备上进行了测试。 我使用jqueryui sortable,它的工作方式很有魅力。

http://touchpunch.furf.com/

polyfill是由Bernardo Castilho于2007年4月1日推出的 this post

这里有一个 demo

文章还介绍了折叠式布局设计的一些考虑因素。

Greensock library

它需要一些跳跃通过环,使同一个物体拖动和旋转,但它的工作原理是完美的

Sencha Touch

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

更新:
https://github.com/kostysh/Drag-Drop-example-for-Sencha-Touch

Tim Ruffle's drag-n-drop polyfill ,当然类似于 的答案(参见@remdevtec答案)。

简单地做 npm install mobile-drag-drop --save (其他可用的安装方法,如带凉亭)

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

以下是我的解决方案:

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

jquerytouchpunch很不错,但是它也禁用了draggable 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

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

此外,他们还提供了一个视频测试,显示这个库比jqueryui Sortable运行得更快。

https://github.com/SortableJS/vue.draggable.next

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