Nimble Polyglot Microcosm

    svelte-agnostic-draggable
    TypeScript icon, indicating that this package has built-in type declarations

    0.1.11 • Public • Published

    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.

    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)

    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.

    Build Instructions

    You may easily build this package yourself.

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

    1. either clone this repository using git or download 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. run npm install in order to install the complete build environment
    4. execute npm run build to create a new build

    License

    MIT License

    Install

    npm i svelte-agnostic-draggable

    DownloadsWeekly Downloads

    115

    Version

    0.1.11

    License

    MIT

    Unpacked Size

    29 kB

    Total Files

    10

    Last publish

    Collaborators

    • arozek