移动设备上的 HTML 拖放

当你使用 JavaScript 添加拖放到一个网页，比如 jQuery UI 可拖放和可拖放，当你在移动设备上通过浏览器浏览时，你如何让这个工作起来——手机会拦截用于拖放的触摸屏动作，以便在页面上滚动等等？

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

  1. 为移动设备设置一个按钮，用于“提取”要拖动的项目，然后让它们单击要放置该项目的区域。

  2. 编写一个应用程序，这样做的移动设备，而不是尝试让网页工作在他们！

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

159829 次浏览
小开

The beta version of Sencha Touch has drag and drop support.

You can refer to their DnD Example. This only works on webkit browsers by the way.

Retrofitting that logic into a web page is probably going to be difficult. As I understand it they disable all browser panning and implement panning events entirely in javascript, allowing correct interpretation of drag and drop.

Update: the original example link is dead, but I found this alternative:
https://github.com/kostysh/Drag-Drop-example-for-Sencha-Touch

小开
最佳答案

jQuery UI Touch Punch just solves it all.

It's a Touch Event Support for jQuery UI. Basically, it just wires touch event back to jQuery UI. Tested on iPad, iPhone, Android and other touch-enabled mobile devices. I used jQuery UI sortable and it works like a charm.

http://touchpunch.furf.com/

小开

I needed to create a drag and drop + rotation that works on desktop, mobile, tablet including windows phone. The last one made it more complicated (mspointer vs. touch events).

The solution came from The great Greensock library

It took some jumping through hoops to make the same object draggable and rotatable but it works perfectly

小开

There is a new polyfill for translating touch events to drag-and-drop, such that HTML5 Drag And Drop is utilizable on mobile.

The polyfill was introduced by Bernardo Castilho on this post.

Here's a demo from that post.

The post also presents several considerations of the folyfill design.

小开

Jquery Touch Punch is great but what it also does is disable all the controls on the draggable div so to prevent this you have to alter the lines... (at the time of writing - line 75)

change

if (touchHandled || !self._mouseCapture(event.originalEvent.changedTouches[0])){

to read

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

add as many ors as you want for each of the elements you want to 'unlock'

Hope that helps someone

小开

here is my solution:

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

You might as well give a try to Tim Ruffle's drag-n-drop polyfill, certainly similar to Bernardo Castilho's one (see @remdevtec answer).

Simply do npm install mobile-drag-drop --save (other installation methods available, e.g. with bower)

Then, any element interface relying on touch detection should work on mobile (e.g. dragging only an element, instead of scrolling + dragging at the same time).

小开

The Sortable JS library is compatible with touch screens and does not require jQuery.

The library size is 43KB.

The official website states in a video that this library is running faster than JQuery UI Sortable.

小开

For vue 3, there is https://github.com/SortableJS/vue.draggable.next

For vue 2, it's https://github.com/SortableJS/Vue.Draggable

The latter you can use like this:

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

These are based on sortable.js


提交答案