Drag and drop on mobile devices
Drag and drop on mobile devices
I had a problem in the past with a draggable and droppable calendar with jQuery and ajax. When you add drag and drop to a web page using JavaScript, such as jQuery UI draggable and droppable, you obtain a problem. The dragging and dropping are intercepted by the phone as scrolling within the page.
How do we solve this ?
Currently, jQuery UI user interface library does not support the use of touch events in their widgets and interactions. This means that the slick UI you designed and tested in your desktop browser will fail on most, if not all, touch-enabled mobile devices, becuase jQuery UI listens to mouse events (mouseover, mousemove and mouseout) not touch events (touchstart, touchmove and touchend).
Solution
That’s where jQuery UI Touch Punch comes in. Touch Punch works by using simulated events to map touch events to their mouse event analogs. Simply include the script on your page and your touch events will be turned into their corresponding mouse events to which jQuery UI will respond as expected.
Using Touch Punch is as easy as 1, 2…
Just follow these simple steps to enable touch events in your jQuery UI app:
- Include jQuery and jQuery UI on your application.
12<span class="tag"><script</span> <span class="atn">src</span><span class="pun">=</span><span class="atv">"http://code.jquery.com/jquery-1.7.2.min.js"</span><span class="tag">></script></span><span class="tag"><script</span> <span class="atn">src</span><span class="pun">=</span><span class="atv">"http://code.jquery.com/ui/1.8.21/jquery-ui.min.js"</span><span class="tag">></script></span> - Include Touch Punch after jQuery UI and before its first use.Please note that if you are using jQuery UI’s components, Touch Punch must be included after jquery.ui.mouse.js, as Touch Punch modifies its behavior.
1<span class="tag"><script</span> <span class="atn">src</span><span class="pun">=</span><span class="atv">"jquery.ui.touch-punch.min.js"</span><span class="tag">></script></span> - There is no 3. Just use jQuery UI as expected and watch it work at the touch of a finger.
1<span class="tag"><script></span><span class="pln">$</span><span class="pun">(</span><span class="str">'#widget'</span><span class="pun">).</span><span class="pln">draggable</span><span class="pun">();</span><span class="tag"></script></span>
Examples
You can find some demos here.