DragDropTouchPolyfill that enables HTML5 drag and 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.
Demohtml5rocks. 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.
InstallYou can install this polyfill via NPM using the following command: ```cmd npm i --save drag-drop-touch ``` Alternatively, download
DragDropTouch.jsand add it to your HTML: ```html ```
Polyfill behaviourThe DragDropTouch polyfill attaches listeners to the document's touch events:
- On touchstart, it checks whether the target element has the draggable attribute
- On touchmove, it checks whether the touch has moved a certain threshold distance
- On touchend, it raises the dragend and drop events.
- Raise the mousemove, mousedown, mouseup, and click events when the
- Raise the dblclick event when there's a new touchstart right after a click, and
- Raise the contextmenu event when the touch lasts a while but the user doesn't