Svelte Sortlist
Installation
npm i svelte-sortlist
List must be let
, it cannot be const
if you bind it. Cause inside SortList
component it will change.
<script>
import SortList from 'svelte-sortlist'
let items = [
{ id: 1, value: 'A' },
{ id: 2, value: 'B' },
{ id: 3, value: 'C' },
]
</script>
<SortList bind:list={items} let:item let:index>
<div>{index} -> {item.value}</div>
</SortList>
Customize element
You can customize SortList
element with element prop. It cannot be component.
<table>
<tbody>
<SortList bind:list={items} element="tr" let:item>
<div>{item.value}</div>
</SortList>
</tbody>
</table>
Customize class
You can specify class of SortList. So you can use it with Tailwind.
<SortList bind:list={items} class="bg-blue-100" let:item>
<div>{item.value}</div>
</SortList>
Reorder event
With bindings you don't need this event, cause your items will be synced thanks to bind. But if you want for example sync it with backend server, you can use the reorder event and request the server on each reorder.
<SortList bind:list={items} let:item on:reorder={(e) => console.log(e.detail.source, e.detail.target)}>
<div>{item.value}</div>
</SortList>
If is over the item
You can for example apply styles on element that you are hovering over.
<SortList bind:list={items} let:item let:isOver>
<div>{isOver ? 'over' : 'not over'} - {item.value}</div>
</SortList>
Rest props
SortList
can be extended by any props. For example id="my-id"
.