Drag and drop on mobile devices

→ Are you a new visitor? Please visit the page guidance for new visitors ←

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:

  1. Include jQuery and jQuery UI on your application.
  2. 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.
  3. There is no 3. Just use jQuery UI as expected and watch it work at the touch of a finger.

Examples

You can find some demos here.

Request an article ←