javascript - HTML Drag And Drop On Mobile Devices - Stack Overflow

admin管理员组

文章数量:1134630

When you add drag and drop to a web page using JavaScript, such as jQuery UI draggable and droppable, how do you get this to work when viewed via a browser on a mobile device - where the touch-screen actions for dragging are intercepted by the phone for scrolling around the page etc?

All solutions welcome... my initial thoughts are:

1. Have a button for mobile devices that "lifts" the item to be dragged and then get them to click the zone they want to drop the item on.

2. Write an app that does this for mobile devices rather then try and get the web page to work on them!

3. Your suggestions and comments please.

When you add drag and drop to a web page using JavaScript, such as jQuery UI draggable and droppable, how do you get this to work when viewed via a browser on a mobile device - where the touch-screen actions for dragging are intercepted by the phone for scrolling around the page etc?

All solutions welcome... my initial thoughts are:

1. Have a button for mobile devices that "lifts" the item to be dragged and then get them to click the zone they want to drop the item on.

2. Write an app that does this for mobile devices rather then try and get the web page to work on them!

3. Your suggestions and comments please.

• javascript
• html
• jquery-ui
• mobile-devices

Share Improve this question Follow edited Feb 24, 2019 at 15:04 Neuron 5,79355 gold badges4343 silver badges6262 bronze badges asked Jul 3, 2010 at 16:36 FentonFenton 251k7373 gold badges400400 silver badges409409 bronze badges 6

• Which devices are you targeting? – Marko Commented Jul 3, 2010 at 23:46
• 31 @Marko - all of them. It isn't The Web if I exclude anyone. – Fenton Commented Jan 22, 2012 at 21:13
• If you don't want jQuery at all, take a look at this github.com/capriza/mobile-touch – oriharel Commented Jul 7, 2015 at 19:45
• 2 Asked 10 years, 5 months ago Active 1 year, 2 months ago Viewed 131k times – Jason FB Commented Dec 1, 2020 at 21:16
• 2 It would be really nice if a SINGLE ONE of the many answers below actually discussed how to do it rather than advertise a third party library. And echoing @JasonFB, amazing that in - now - 2022, there is still no clear answer. – Emperor Eto Commented May 3, 2022 at 18:33

 |  Show 1 more comment

9 Answers 9

Sorted by: Reset to default 103

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/

There is a 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 polyfill design.

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

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

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.

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

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');
    }
});

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

本文标签： javascriptHTML Drag And Drop On Mobile DevicesStack Overflow