jQuery UI Touch Punch - Hack to Enable Functionality on Mobile Devices
A few tests of the Touch Punch hack that enables jQuery UI widgets like
Draggable to work properly on a mobile device. Without it, the Slider and Draggable widgets would not function
properly.
The size of the object being dragged around needs to be appropriate so it will capture the touch events. The red DIV below has a Draggable interaction added. The default size of 5px is difficult to drag on a mobile device. Use the slider to make the DIV larger. There is also a Canvas (green) and SVG (blue) object to test interaction. These elements are listening to mousedown and mouseup events which will resize the red DIV as well. Touch Punch should forward the touchstart and touchend properly to these events. However, the mousedown acts more like a click - the animation does not continue smoothly until the end. Instead, it jumps to the end and then animates back to the start.
The size of the object being dragged around needs to be appropriate so it will capture the touch events. The red DIV below has a Draggable interaction added. The default size of 5px is difficult to drag on a mobile device. Use the slider to make the DIV larger. There is also a Canvas (green) and SVG (blue) object to test interaction. These elements are listening to mousedown and mouseup events which will resize the red DIV as well. Touch Punch should forward the touchstart and touchend properly to these events. However, the mousedown acts more like a click - the animation does not continue smoothly until the end. Instead, it jumps to the end and then animates back to the start.