jQuery Drag Event Plugin with Touch Support

14 comments   6,912 views

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

jQuery.event.drag (version 2.0.1, 46.63 kB, 1722 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.

  • Pingback: JavaScript Drag Events on iPhone and Other Touch Based Devices

  • joachim warning

    It works very fine, but when I bind jquery.event.drop.js for  the drop.events they were not fired

    • http://www.shamasis.net Shamasis Bhattacharya

      Strange. Will look into.

      • cotko

        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

        • cotko

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

  • David Hay

    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.

    • http://www.shamasis.net Shamasis Bhattacharya

      Seems like the offset and delta values are not forwarded properly from touch. Need to patch it. Will do so and post update ASAP.

  • http://twitter.com/riscarrott Richard Scarrott

    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

    • http://www.shamasis.net Shamasis Bhattacharya

      Hi Richard,

      First off, I am sorry that I missed your post here. :(  

      The issue seems to be with touch event related calculations are not forwarded properly in the pseudo event. Will look into it.

    • Fabian Arnold

      Hi,

      the problem is that this plugin does not recognize multi-touch input. Fixed it here: http://addictivity.de/jquery-drag-event-plugin-multi-touch/

  • Leslie

    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.

  • Pingback: jQuery Drag Event Plugin (Multi-Touch) | addictivity

  • godlevski

    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 )

    • Alison K.

      Thank you!