svelte-dnd-list-with-grid

Svelte Dnd List

A very lightweight, dependency free and simple drag and drop library for Svelte. The library supports multiple types of lists, and moving items between lists.

It's still currently in development and as such its API is not stable and might change as development continues.

Getting Started

Install through npm with:

npm i svelte-dnd-list

Below is a very simple example that shows reordering an array of numbers in a vertical list. You can play with this example here.

<svelte:options immutable={true} />

<script lang="ts">
	import DragDropList, { VerticalDropZone, reorder, type DropEvent } from 'svelte-dnd-list';

	let items = [1, 2, 3, 4, 5];

	function onDrop({ detail: { from, to } }: CustomEvent<DropEvent>) {
		if (!to || from === to) {
			return;
		}

		items = reorder(items, from.index, to.index);
	}
</script>

<h1>Svelte Dnd List - Simple Example</h1>

<DragDropList
	id="example"
	type={VerticalDropZone}
	itemSize={50}
	itemCount={items.length}
	on:drop={onDrop}
	let:index
>
	<div>{items[index]}</div>
</DragDropList>

<style>
	div {
		display: flex;
		justify-content: center;
		align-items: center;
		width: 50px;
		height: 50px;
		border: 1px solid black;
	}
</style>

Examples

• Simple example
• Scrollable container example
• Programatic control
• Multiple lists, item morphing and programmatic moving.