svelte-agnostic-draggable

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.

Installation

npm install svelte-agnostic-draggable

Usage

<script>
  import { draggable, droppable, sortable } from 'svelte-agnostic-draggable'
  
  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 MouseEvents only, you will presumably also need a module such as svelte-touch-to-mouse which maps TouchEvents to MouseEvents. All examples for svelte-agnostic-draggable already use that module and may therefore also be used on smartphones and tablets.

Examples

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.

Background Information

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.

More detailled Examples

All examples are available on the Svelte REPL.

• Draggable
  • Draggable with Crosshairs (uses coordinates from drag events)
  • draggable Note (uses a drag handle)
  • draggable resizable Note
    uses an invisible "helper" in order to decouple the actually dragged element from the original resize handle. As a consequence, the element to be resized can control its size itself (as in this example).
    
    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
• Droppable
• Sortable