svelte-action-sortable

Minimal Svelte action to add drag and drop sorting to a list.

<script lang="ts">
    import { writable } from 'svelte/store';
    import { flip } from 'svelte/animate';
    import createSortable from '$lib/actions/sortable';

    const list = writable(['a', 'b', 'c', 'd', 'e', 'f', 'g']);
    const [sortable, target] = createSortable(list);
</script>

<div use:sortable>
    {#each $list as item (item)}
        <div animate:flip use:target={item}>
            {item}
        </div>
    {/each}
</div>

Why?

Existing libraries such as svelte-sortable-list use extra dom nodes and require resturcturing your markup. svelte-action-sortable only uses 1 single dom node to indicate where the item will be moved to and does not require you to change your markup at all.