Sign Up for Free

RunKit +

Try any Node.js package right in your browser

This is a playground to test code. It runs a full Node.js environment and already has all of npm’s 1,000,000+ packages pre-installed, including @justinribeiro/html5-dragdroptouch-shim with all npm packages installed. Try it out:

var html5DragdroptouchShim = require("@justinribeiro/html5-dragdroptouch-shim")

This service is provided by RunKit and is not affiliated with npm, Inc or the package authors.

@justinribeiro/html5-dragdroptouch-shim v0.1.2

An opinionated shim that polyfills HTML5 drag and drop support on mobile devices with Event.ComposedPath() support

npm version

HTML5 DragDropTouch Shim

An opinionated shim that polyfills HTML5 drag and drop support on mobile devices with Event.ComposedPath() support

Key Differences From Other Polyfills

While this is in large part an ES Modules refactor of Bernado's dragdroptouch polyfill (which deserves the bulk of the love by the way), this version differs in two keys areas:

  1. Re: finding the draggable. Uses event.composedPath() to allow use to hunt for draggables within open ShadowRoots

  2. Re: finding the dropzone. Uses event.composedPath() to find the target shadowRoot, then uses DocumentOrShadowRoot.elementFromPoint to locate our dropzone target.

This allows it to be more readily be used with ShadowDOM and web components, which is my primary use case for it to be honest.

Usage

Install via yarn or npm:

yarn add @justinribeiro/html5-dragdroptouch-shim

Only load the module if device has touch support.

if ('ontouchstart' in document) {
  import('@justinribeiro/html5-dragdroptouch-shim/dist/esm.js').then(module => {
    const shim = new module.default();
  });
  status.textContent = 'TOUCH DETECTED: DragDropTouch shim loaded!';
} else {
  status.textContent = 'NATIVE DRAGDROP DETECTED: no shim loaded.';
}

Additional Configuration

The class constructor can take an array of options if you want more control over the various triggers and delays within the shim:

import { default as DdtShim } from '@justinribeiro/html5-dragdroptouch-shim';

const opts = {
  threshold = 5,
  opacity = 0.8,
  dblClick = 500,
  ctxMenu = 900,
  isPressHoldMode = 400,
  pressHoldAwait = 400,
  pressHoldMargin = 25,
  pressHoldThreshold = 0
}
const startUpTheShim = new DdtShim(opts);

Examples

You can run the examples via the demo site.

There are a host of examples within the demo holder, including a set of example web components that support drag and drop and the shim. To run locally:

yarn dev
RunKit is a free, in-browser JavaScript dev environment for prototyping Node.js code, with every npm package installed. Sign up to share your code.
Sign Up for Free