svelte-drag-drop-touch

HTML5 Drag-and-Drop support for mobile devices (not only for Svelte)

NPM users: please consider the Github README for the latest description of this package (as updating the docs would otherwise always require a new NPM package version)

Just a small note: if you like this module and plan to use it, consider "starring" this repository (you will find the "Star" button on the top right of this page), so that I know which of my repositories to take most care of.

Installation

svelte-drag-drop-touch may be used as an ECMAScript module (ESM), a CommonJS or AMD module or from a global variable.

You may either install the package into your build environment using NPM with the command

npm install svelte-drag-drop-touch

or load the plain script file directly

<script src="https://unpkg.com/svelte-drag-drop-touch"></script>

Access

When used within Svelte, you should always import the package in a module context:

<script context="module">
  import DragDropTouch from 'svelte-drag-drop-touch'
</script>

Otherwise, the kind of import depends on the type of module you prefer.

ESM: import DragDropTouch from 'svelte-drag-drop-touch'
CommonJS: const DragDropTouch = require('svelte-drag-drop-touch')
AMD: require(['svelte-drag-drop-touch'], (DragDropTouch) => {...})

In any case, a simple import is all you need to use HTML5 Drag-and-Drop on mobile devices - (apart from handling DragEvents) there is no extra programming required.

Example

Several examples are available on the Svelte REPL - feel free to play with them! The most basic one is

svelte-drag-drop-touch

Additional, more detailled examples may be found below.

Background Information

Bernardo Castilho has written a nice (and lightweight) Drag-and-Drop polyfill which brings HTML5 Drag-and-Drop capabilities to mobile devices. Unfortunately, the NPM package for that polyfill is outdated and does not seem to be updated.

svelte-drag-drop-touch just brings a TypeScript definition file and a trivial wrapper around the original code and bundles these with the latest version of DragDropTouch.js into an NPM package that may easily be imported into (not only) a Svelte application.

All the heavy lifting is done by DragDropTouch.js, thus, all credits go to Bernardo Castilho!

Additional Examples

Drop- and No-Drop-Zones - look where the events are sent to
plain Dragging - could be used to combine plain dragging with drag-and-drop
Flicking - illustrates a simple approach to "flicking"

Build Instructions

You may easily build this package yourself.

Just install NPM according to the instructions for your platform and follow these steps:

either clone this repository using git or download a ZIP archive with its contents to your disk and unpack it there
open a shell and navigate to the root directory of this repository
run npm install in order to install the complete build environment
execute npm run build to create a new build

You may also look into the author's build-configuration-study for a general description of his build environment.

License

MIT License

rozek/svelte-drag-drop-touch