Svelte-DragDropList
Sortable lists made with Svelte.
Try the REPL!
Available from NPM
Why this component?
- Bidirectional binding - data order updates as soon as the user drags a list item into a new position, even before it is dropped
- Full touch support - doesn't use the HTML5 drag and drop API
- Accessible - includes buttons to move elements without dragging
- Easier than writing a new one, probably.
Usage
Basic REPL
REPL with every feature!
The simplest way to use the component is to pass it an array of unique strings. If you bind:data
, the source array will be updated as the user rearranges its items.
<script>
import DragDropList from "svelte-dragdroplist";
let data = ["Adams", "Boston", "Chicago", "Denver"];
</script>
<DragDropList bind:data={data}/>
Unique IDs
If you aren't sure that your strings will be unique, you should instead pass an array of objects, each with a unique ID:
let data = [{"id": 0, "text": "Boston"},
{"id": 1, "text": "Boston"},
{"id": 2, "text": "Chicago"},
{"id": 3, "text": "Denver"}];
HTML
You can also include an "html" attribute instead of "text". It's up to you to make sure the html is clean.
If you want, you can even use both in one list.
let data = [{"id": 0, "text": "Adams"},
{"id": 1, "text": "Boston"},
{"id": 2, "html": "<p style='color: blue;'>Chicago</p>"},
{"id": 3, "html": "<p style='color: red;'>Denver</p>"}];
Removable Items
A delete button can be added to each item with the removesItems
prop:
<script>
import DragDrop from "./DragDrop.svelte";
data = ["Adams", "Boston", "Chicago", "Denver"];
</script>
<DragDrop bind:data={data} removesItems={true}/>
Note: adding items is as simple as adding them to the data array.
In Progress
- Additional animations on drop