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 you are implementing this jQuery plugin for the first time, then the original developer’s website will be the ideal source for information, documentation and demos.

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

[Download not found]

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.

15 Replies to “jQuery Drag Event Plugin with Touch Support”

      1. Hi,
        this plugin doesn’t work anymore since jquery 1.7 due to threedubmedia’s approach, here is a thread regarding this issue for original plugin. I’ve checked and the code in this plugin is same as original’s therefore this plugin doesn’t work as well 🙁

        http://bugs.jquery.com/ticket/11012

        1. Actually it doesn’t work when using delegate,on and live bind methods, while ‘classic’ bind method still works..

  1. Hi, I’m not sure if I’m getting some confilcts but I’m getting some strange results with this plugin. First: all event.offsetX results are coming back positive no matter which direction the drag. Also, the offsetX in the original increments whereas I’m just getting the value of each drag here.

  2. Hi there,

    Really glad to see someone making threedubmedias drag events device agnostic. I’ve noticed an issue however where dragends event object is returning zero for both pageX and pageY (at least on iOS) – any ideas why this might be?

    Cheers,
    Rich

  3. Hi, just wanted to let you know that the z-index example for threedubmedia does not work with your touch plugin, at least on iOS. You can touch & drag the item only once, but then you cannot touch or drag it again once it is dropped.

  4. For plugin to work with jquery v1.9.1 replace ‘g.handle.call’ with ‘g.dispatch.call’ in the minified file ( ‘$event.handle.call’ with ‘$event.dispatch.call’ in nonminified respectively )

  5. Wonderful plug in!

    For multitouch events, it looks like the draginit event fires in between the two respective points. Is there any way to modify the event so that it fires at either point?

    Thanks!

Leave a Reply