https://github.com/tarb/svelte-dnd-list
Simple and lightweight Svelte Drag and Drop library
https://github.com/tarb/svelte-dnd-list
Last synced: about 1 year ago
JSON representation
Simple and lightweight Svelte Drag and Drop library
- Host: GitHub
- URL: https://github.com/tarb/svelte-dnd-list
- Owner: tarb
- License: mit
- Created: 2022-05-24T15:37:56.000Z (about 4 years ago)
- Default Branch: master
- Last Pushed: 2023-01-16T06:40:20.000Z (over 3 years ago)
- Last Synced: 2025-03-24T11:07:39.062Z (over 1 year ago)
- Language: Svelte
- Size: 850 KB
- Stars: 49
- Watchers: 2
- Forks: 4
- Open Issues: 6
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# 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:
```terminal
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.](https://tarb.github.io/svelte-dnd-list/simple)
```svelte
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);
}
Svelte Dnd List - Simple Example
{items[index]}
div {
display: flex;
justify-content: center;
align-items: center;
width: 50px;
height: 50px;
border: 1px solid black;
}
```
## Examples
- [Simple example](https://tarb.github.io/svelte-dnd-list/simple)
- [Scrollable container example](https://tarb.github.io/svelte-dnd-list/scroll)
- [Programatic control](https://tarb.github.io/svelte-dnd-list/programatic)
- [Multiple lists, item morphing and programmatic moving.](https://tarb.github.io/svelte-dnd-list/)