Repository files navigation

jQuery UI interactions draggable/droppable/sortable for Svelte

Important Notice: because of not yet merged (but important) bug fixes in the originalagnostic-draggable, this package currently uses a newer copy, namelyagnostic-draggable-bug-fixed. Apart from these bug fixes, however, the original description still applies.

NPM users: please consider theGithub 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:

<scriptcontext="module">import{draggable,droppable,sortable}from'svelte-agnostic-draggable'</script><script>functionEventHandler(Event){ ...}// just as an example</script><divuse:draggable={{options}}on:draggable:init={EventHandler}on:draggable:destroy={EventHandler}on:drag:start={EventHandler}on:drag:move={EventHandler}on:drag:stop={EventHandler}>...</div><divuse: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><divuse: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

Sinceagnostic-draggable itself handlesMouseEvents only, you will presumably also need a module such assvelte-touch-to-mouse which mapsTouchEvents toMouseEvents. All examples forsvelte-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:

• Draggable (with Event Log - open the REPL console)
• Droppable (with Event Log - open the REPL console)
• Sortable (with Event Log - open the REPL console)

For more detailled examples, see below.

svelte-agnostic-draggable is a thin wrapper aroundagnostic-draggable which makes jQuery UI-like interactionsdraggable,droppable andsortable 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 thedocumentation of the underlying library.

The wrapper itself is almost trivial, all the "heavy lifting" is done byagnostic-draggable - thus, credits primarily go toMarcos Pont.

All examples are available on the Svelte REPL.

• Draggable
  • Draggable with Crosshairs (uses coordinates from drag events)
     
  • Line Node dragging (reposition the ends of a straight line)
  • Polygon Node dragging (reposition the nodes of a polygon)
  • quadratic Bezier Curve Node dragging (reposition the nodes of a quadratic bezier curve)
  • cubic Bezier Curve Node dragging (reposition the nodes of a cubic bezier curve)
     
  • draggable Note (uses a drag handle)
  • draggable resizable Note (with an invisible "helper")
    Warning: right now, "draggable" does not seem to expect a draggable object to change its size after initial setup - this causes "containment" not to behave as desired. As a workaround, you may simply control positioning of resizable draggables in the same way as this example controls the draggable's size.
     
  • draggable Button (combines clicking and dragging)
     
  • ResizeHandles (implements a typical resize frame with handles)
     
  • Slider (a simple linear slider)
  • Dial (a simple dial to visually choose an angle)
• Droppable
  • Circle, Triangle, Star (drag shapes to where they belong)
• Sortable
  • basicSortable example
    this example also uses thebody-scroll-lock package fromWill in order to avoid the annoying body scrolling effect when trying to rearrange list items.
  • Sortable with Handles (as preferred on mobile platforms)
     
  • List sort with feedback (updates Svelte's list model after sorting)
    Warning: "sortable"s do not properly handle "revert" right now...
  • two-dimensional List Layout (lists don't necessarily have to look like columns)
     
  • move Items between Sortables
  • drag new item into a Sortable (a bit tricky due to bug workarounds)

You may easily build this package yourself.

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

1. either clone this repository usinggit ordownload a ZIP archive with its contents to your disk and unpack it there
2. open a shell and navigate to the root directory of this repository
3. runnpm install in order to install the complete build environment
4. executenpm run build to create a new build

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

MIT License