Svelte-DragDropList

Sortable lists made with Svelte. Available from NPM!

Why this component?

• Bidirectional binding - data order updates as soon as the user drags a list item into a new position, even before it is dropped
• Full touch support - doesn't use the HTML5 drag and drop API
• Accessible - includes buttons to move elements without dragging
• Easier than writing a new one, probably.

Usage

Basic REPL
REPL with every feature!

The simplest way to use the component is to pass it an array of strings. If you bind:data, the source array will be updated as the user rearranges its items.

<script>
    import DragDropList from "svelte-dragdroplist";

    let items = ["Adams", "Boston", "Chicago", "Denver"];
</script>

<DragDropList bind:data={items} ItemComponent={YourSvelteComponent} itemIdName={"uuid"} />

ItemComponent

(optional) ItemComponent is Svelte component. If you pass one, it will be called like this:

<YourSvelteItemComponent 
    data={items[i]}
    index={i}        // Should only be used for making display decisions (2-way binding behviour untested)
    allItems={items} // Should only be used for making display decisions (2-way binding behviour untested)
    on:moveup
    on:movedown
    on:remove
/>

You must dispatch the moveup, movedown, remove events if they are triggered by UI in YourSvelteItemComponent.

Note: adding items is as simple as adding them to the data array.

Unique IDs

If you aren't sure that your strings will be unique, you should instead pass an array of objects, each with a unique ID:

let data = [{"id": 0, "text": "Boston"},
            {"id": 1, "text": "Boston"},
            {"id": 2, "text": "Chicago"},
            {"id": 3, "text": "Denver"}];

If the item's ID is not named id, you can customize it by setting itemIdName:

Default ItemComponent

The default ItemComponent will be used if no ItemComponent is specified. It accepts items in any of the formats shown here. (You can mix formats.)

let data = ["Chicago", 
            "Denver",
            {"text": "Adams"},
            {"text": "Boston"},
            {"html": "<p style='color: blue;'>Chicago</p>"},
            {"html": "<p style='color: red;'>Denver</p>"}];

Styling

You can pass values to class and style to style the list container.

<DragDropList class="" style="" />

To style your items it is recommended to supply a custom ItemComponent.

In Progress

• Additional animations on drop

Development

npm install
npm run demo

visit: http://localhost:8061