jQuery Drag Event Plugin with Touch Support
This plugin is a modified version of the original jQuery.event.drag from ThreeDubMedia for emulating easy-to-use drag events like dragstart, dragend, etc. jQuery UI also has such events coded within it. However, if one is just looking for the drag events, jQuery UI comes with an overhead of a lot of overhead codes.
This plugin works fine on non-touch devices. But for touch based devices, the lack of basic mouse-events renders this plugin non-functional. This “touch updated” version of the plugin is made to respond to touch events on iOS devices like iPad and iPhone. It is also likely to work on other touch devices.
What does this plugin do?
This plugin is focused on correctly simulating the drag events in a very usable way. This plugin does not add classnames, does not alter the position or appearance of any elements, and does not alter the DOM. This plugin only provides the essential callbacks at the correct points in the interaction model to enable developers to have complete control over the interactions that they create. This reduces the file size, eliminates dependencies, and increases performance.
~ citing the original website.
If you want to know more about the original version of this plugin, visit: http://threedubmedia.com/code/event/drag
How to use this plugin?
If one is already using the original plugin, simply replacing the same with the downloadable script in this page would make the drag events on a page to work perfectly on touch inputs. The existing “dragstart”, “drag” and “dragend” events will become functional once the original code is replaced by the code in this plugin.
Download The Plugin
jQuery.event.drag (version 2.0.1, 46.63 kB, 1715 dowloads)
The downloadable zipped archive contains both the original plugin and the modified plugin along with their minified versions.
What were the modifications done?
The original code was written in a well structured manner. This allowed the changes to be done in without affecting much of the code pattern.
The places where the original code responded to “mousedown”, “mousemove” and “mouseup” events were respectively replaced by “touchstart”, “touchmove” and “touchend” events.
Also, the necessary codes needed to check prevention of viewport scrolling were added along with codes to copy the touch coordinates to mouse-pointer coordinates.Google+