jQuery UI interactions draggable/droppable/sortable for Svelte
Important Notice: because of not yet merged (but important) bug fixes in the original agnostic-draggable, this package currently uses a newer copy, namely agnostic-draggable-bug-fixed. Apart from these bug fixes, however, the original description still applies.
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.
npm install svelte-agnostic-draggable
It is recommended to import the package within a module context:
<script context="module">
import { draggable, droppable, sortable } from 'svelte-agnostic-draggable'
</script>
<script>
function EventHandler (Event) { ... } // just as an example
</script>
<div use:draggable={{ options }}
on:draggable:init={EventHandler} on:draggable:destroy={EventHandler}
on:drag:start={EventHandler} on:drag:move={EventHandler} on:drag:stop={EventHandler}
>...</div>
<div use:droppable={{ options }}
on:droppable:init={EventHandler} on:droppable:destroy={EventHandler}
on:droppable:activate={EventHandler} on:droppable:deactivate={EventHandler}
on:droppable:over={EventHandler} on:droppable:out={EventHandler}
on:droppable:drop={EventHandler}
>...</div>
<div use:sortable={{ options }}
on:sortable:init={EventHandler} on:sortable:destroy={EventHandler}
on:sortable:activate={EventHandler} on:sortable:deactivate={EventHandler}
on:sort:start={EventHandler} on:sort:move={EventHandler} on:sort:stop={EventHandler}
on:sortable:over={EventHandler} on:sortable:out={EventHandler}
on:sortable:change={EventHandler} on:sortable:update={EventHandler}
on:sortable:remove={EventHandler} on:sortable:receive={EventHandler}
>...</div>
Important Note for mobile Users
Since agnostic-draggable
itself handles MouseEvent
s only, you will presumably also need a module such as svelte-touch-to-mouse which maps TouchEvent
s to MouseEvent
s. All examples for svelte-agnostic-draggable
already use that module and may therefore also be used on smartphones and tablets.
All examples are available on the Svelte REPL - feel free to play with them!
Here are some basic ones:
For more detailled examples, see below.
svelte-agnostic-draggable
is a thin wrapper around agnostic-draggable which makes jQuery UI-like interactions draggable
, droppable
and sortable
available to web applications without any dependency for jQuery and jQuery UI.
With this wrapper, these interactions may now be used as "actions" in Svelte components. For the available options and their format, please, consider the documentation of the underlying library.
The wrapper itself is almost trivial, all the "heavy lifting" is done by agnostic-draggable
- thus, credits primarily go to Marcos Pont.
All examples are available on the Svelte REPL.
You may easily build this package yourself.
Just install NPM according to the instructions for your platform and follow these steps:
npm install
in order to install the complete build environmentnpm run build
to create a new buildYou may also look into the author's build-configuration-study for a general description of his build environment.