+page.md

title	description
Sortable	Wrapper for SortableJS.

<script> import Meta from "$components/meta.svelte" </script>

Wrapper for SortableJS

⚡️ Prerequisites

@install-pkg(sortablejs)

Usage

<script>
    import { sortable } from "@sveu/extend/sortable"

    let list = [
        { id: 1, name: "a" },
        { id: 2, name: "b" },
        { id: 3, name: "c" },
    ]
</script>

<ul use:sortable>
    {#each list as item}
        <li>
            {item.name}
        </li>
    {/each}
</ul>

Example

<script>
    import { sortable, move_list } from "@sveu/extend/sortable" // [svp! hl:1]

    let list = [
        { id: 1, name: "a" },
        { id: 2, name: "b" },
        { id: 3, name: "c" },
    ]

    let _list = list

    const options = { // [svp! hl:6]
        animation: 500,
        onUpdate: (evt) => {
            _list = move_list(list, evt?.oldIndex ?? 0, evt?.newIndex ?? 0)
        },
    }
</script>

<!-- // [svp! hl:3] -->
<ul 
    use:sortable="{options}"
    class="rounded flex flex-col m-auto bg-gray-500/5 h-200px p-4 w-300px gap-2">
    {#each list as item}
        <li class="rounded bg-gray-500/5 p-3 h20">
            {item.name}
        </li>
    {/each}
</ul>

<pre class="text-center">
    {JSON.stringify(_list, null)}
</pre>

API

Options

Read the SortableJS docs