@niek-peters/svelte-draggable

A simple, typesafe library that makes it trivial to create lists of draggable elements.

<script lang="ts">
    import { writable } from 'svelte/store';
    import { DragList, DragRoot, newList } from '$lib';

    const gamesRanking = newList(
        'games',
        writable([
            { uid: crypto.randomUUID(), name: 'Minecraft' },
            { uid: crypto.randomUUID(), name: 'Subnautica' },
            { uid: crypto.randomUUID(), name: 'Satisfactory' }
        ])
    );
</script>

<DragList let:index list={gamesRanking}>
    {@const game = gamesRanking.get(index)}
    <p>{game.name}</p>
</DragList>

<DragRoot />

Features

Drag elements between lists by setting targets

<!-- Now elements can be dragged from list 1 -> list 2, but not back -->
<DragList ... list={list1} targets={['list2']}>...</DragList>

<DragList ... list={list2}>...</DragList>

Disable inner list reordering

<DragList ... inner={false}>...</DragList>

Add mobile friendly buttons for dragging/removing

<DragList ...>
    <button name="drag">Drag here!</button>
    <button name="delete">Delete</button>
</DragList>

Install

SvelteKit: npm i -D @niek-peters/svelte-draggable

Svelte: npm i @niek-peters/svelte-draggable

Notes

• This package is still highly experimental and will probably change a ton in the near future. Use at your own risk!