Bernardo-Castilho.github.io

DragDropTouch

Polyfill that enables HTML5 drag drop support on mobile (touch) devices.

The HTML5 specification includes support for drag and drop operations. Unfortunately, most mobile browsers do not implement it, so applications that rely on HTML5 drag and drop have reduced functionality when running on mobile devices.

The DragDropTouch class is a polyfill that translates touch events into standard HTML5 drag drop events. If you add the polyfill to your pages, drag and drop operations should work on mobile devices just like they do on the desktop.

Demo

The demo should work on desktop as well as on mobile devices, including iPads and Android tablets.

The top section of the demo is based on a well-known HTML5 drag and drop sample available here:

The following sections demonstrate how the polyfill works with standards-based components that use HTML5 drag and drop. You can use touch to resize and reorder grid columns, data groups, and pivot fields.

Install

Add the DragDropTouch.js polyfill to your page to enable drag and drop on mobile devices:

<script src="DragDropTouch.js"></script>

Polyfill behaviour

The DragDropTouch polyfill attaches listeners to the document’s touch events:

To avoid interfering with the automatic browser translation of some touch events into mouse events, the polyfill performs a few additional tasks:

Thanks

Thanks to Eric Bidelman for the great tutorial on HTML5 drag and drop: [Native HTML5 Drag and Drop] (http://www.html5rocks.com/en/tutorials/dnd/basics/).

Thanks also to Chris Wilson and Paul Kinlan for their article on mouse and touch events: [Touch And Mouse] (http://www.html5rocks.com/en/mobile/touchandmouse/).

License

MIT License