Drag and Drop Touch
++ A polyfill that enables HTML5 drag drop support on mobile (touch) + devices. +
++ See the Github page + here. +
++ Why +
++ The HTML5 specification includes support for drag and drop operations. +
++ Unfortunately, this specification is based on mouse events, rather than + pointer events, and so most mobile browsers do not implement it. +
++ As such, 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. +
+Installation
++ Download the polyfill +
++ Add the drag-drop-touch.esm.js or + drag-drop-touch.esm.min.js polyfill + script to your page to enable drag and drop on devices with touch + input: +
+ ++ This loads the polyfill and immediately enables it so that you + do not need to write any code yourself. +
++ If omitted, the library will instead set up a + window.DragDropTouch object with a + single function, + DragDropTouch.enable(dragRoot, dropRoot, options). All three arguments are optional. +
++ If left off, + DragDropTouch.enable() simply + polyfills the entire page. +
++ If you only want the polyfill to apply to specific elements + though, you can call the enable function once for each set of + elements that need polyfilling. +
++ The type="module" attribute is + required. If left off, you'll probably get a browser error + similar to: +
+ +Via a CDN url
++ If you can't or don't want to download the file, you can use the + following to include the polyfill. +
+ +Via ESM
++ As an ES module, you can also use this polyfill as an import in + other scripts: +
+ +Polyfill behaviour
++ The DragDropTouch class attaches listeners + to the document's touch events: +
+-
+
-
+
+ On touchstart, it checks whether + the target element has the + draggable attribute or is contained + in an element that does. If that is the case, it saves a + reference to the "drag source" element and prevents the default + handling of the event. +
+
+ -
+
+ On touchmove, it checks whether the + touch has moved a certain threshold distance from the origin. If + that is the case, it raises the + dragstart event and continues + monitoring moves to fire + dragenter and + dragleave. +
+
+ -
+
+ On touchend, it raises the + dragend and + drop events. +
+
+
+ To avoid interfering with the automatic browser translation of some + touch events into mouse events, the polyfill performs a few additional + tasks: +
+-
+
-
+
+ Raise the mousemove, + mousedown, + mouseup, and + click events when the user touches + a draggable element but doesn't start dragging +
+
+ -
+
+ Raise the dblclick event when + there's a new touchstart right + after a click +
+
+ -
+
+ Raise the contextmenu event when + the touch lasts a while but the user doesn't start dragging the + element. +
+
+
+ Overriding the default behaviour +
++ The following options can be passed into the enabling function to change + how the polyfill works: +
+| Attribute | +Type | +Description | +
|---|---|---|
| + allowDragScroll + | +boolean | +
+
+ Determines whether to allow scrolling when a drag
+ reaches the edges of the screen.
+
+ + Default: true + |
+
| + contextMenuDelayMS + | +number | +
+
+ The number of milliseconds before the polyfill
+ triggers a context menu event on long press.
+
+ + Default: 900 + |
+
| + dragImageOpacity + | ++ number (0 to 1) + | +
+
+ Determines how transparent the drag placeholder
+ attached to the cursor should be.
+
+ + Default: 0.5 + |
+
| + dragScrollPercentage + | +number | +
+
+ The size of the "hot region" at the edge of the
+ screen where scrolling is allowed during drag.
+
+ + Default: 10 + |
+
| + dragScrollSpeed + | +number | +
+
+ The number of pixels to scroll when a drag event
+ occurs within the scrolling region.
+
+ + Default: 10 + |
+
| + dragThresholdPixels + | +number | +
+
+ The number of pixels a touchmove needs to travel
+ before switching to drag mode.
+
+ + Default: 5 + |
+
| + isPressHoldMode + | +boolean | +
+
+ Determines whether a long press is required to
+ initiate drag events.
+
+ + Default: false + |
+
| + forceListen + | +boolean | +
+
+ Determines whether the polyfill should be enabled
+ irrespective of device touch capability.
+
+ + Default: true + |
+
| + pressHoldDelayMS + | +number | +
+
+ The number of milliseconds before the polyfill
+ considers an active press as a "long press".
+
+ + Default: 400 + |
+
| + pressHoldMargin + | +number | +
+
+ The number of pixels a touch event can drift during
+ a long press start.
+
+ + Default: 25 + |
+
| + pressHoldThresholdPixels + | +number | +
+
+ The drift in pixels that determines whether a long
+ press initiates or starts a touch-drag.
+
+ + Default: 0 + |
+
Examples
++ Try some of the examples below, then 1) open your Developer Tools, turn + on mobile emulation to enable touch input or 2) use your phone, and try + to do the same. Things should still work. +
++ Dragging some boxes +
+Just drag the boxes around.
+
+ Sorting tasks
+Drag the tasks into the order you want them to be sorted.
+-
+
- + + Clean the dishes + +
- + + Walk the dog + +
- + + Wash the car + +
- + + Feed the cat + +
+ Kanban board +
+Drag and drop tasks into a Kanban board:
+-
+
-
+
You can switch tasks by dropping one on top of another.
+
+ -
+
You can reorder tasks by dragging them up or down.
+
+ -
+
You can move them to another column by dragging them into it.
+
+
Backlog
+-
+
- + Implement user authentication flow + +
- + Write unit tests for API + +
In progress
+-
+
- + Add error handling for login + +
Done
+-
+
- + Set up the database + +
- + Create API endpoints for users + +