Skip to content

Simple and lightweight Svelte Drag and Drop library

License

Notifications You must be signed in to change notification settings

tarb/svelte-dnd-list

Repository files navigation

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

About

Simple and lightweight Svelte Drag and Drop library

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published