HTML Drag And Drop On Mobile Devices

Question

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    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  Write an app that does this for mobile devices rather then try and get the web page to work on them  Your suggestions and comments please

User · Answer

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   lt draggable v-model  quot myArray quot  group  quot people quot   start  quot drag true quot   end  quot drag false quot  gt      lt div v-for  quot element in myArray quot   key  quot element id quot  gt   element name   lt  div gt   lt  draggable gt   These are based on sortable js

User · Answer

The Sortable JS library is compatible with touch screens and does not require jQuery   The way it handles touch screens it that you need to touch the screen for about 1 second to start dragging an item   Also  they present a video test showing that this library is running faster than JQuery UI Sortable

User · Answer

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

User · Answer

here is my solution     el  on  touchstart   function e        var link     e target parentNode  closest  a         if link length  gt  0            window location href   link attr  href

User · Answer

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

User · Answer

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

User · Answer

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

User · Answer

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

User · Answer

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

[javascript] HTML Drag And Drop On Mobile Devices

Examples related to javascript

Examples related to html

Examples related to jquery-ui

Examples related to mobile-devices