Sortable lists with Svelte. try the REPL
Grab DragDrop.svelte
from src/
and import it into your Svelte app -
The simplest way to use the component is to pass it an array of unique strings. If you bind:data
, the array will be updated as the user rearranges its items.
<script>
import DragDrop from "./DragDrop.svelte";
data = ["Adams", "Boston", "Chicago", "Denver"];
</script>
<DragDrop bind:data={data}/>
If you aren't sure that your strings will be unique, you should instead pass an array of objects, each with a unique ID:
data = [{"id": 0, "text": "Boston"},
{"id": 1, "text": "Boston"},
{"id": 2, "text": "Chicago"},
{"id": 3, "text": "Denver"}];
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.
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>"}];