Sortable

Wrapper for

SortableJS

⚡️ Prerequisites

npm install --save sortablejs
npm install --save sortablejs
sh

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>
<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>
svelte

Example

  • a
  • b
  • c 
    [{"id":1,"name":"a"},{"id":2,"name":"b"},{"id":3,"name":"c"}]

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

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

    let _list = list

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

<!--  -->
<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>
<script>
    import { sortable, move_list } from "@sveu/extend/sortable" 

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

    let _list = list

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

<!--  -->
<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>
svelte
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
Click fold/expand code

API

Options

Read the

SortableJS docs

Last update at: Invalid Date