I’m new to svelte and am working on a simple drag and drop list using sortablejs as the base. I load the data from a nested array of objects to instantiate the lists, and want any changes from sortable to be replicated to the array, but I can’t get it to stop behaving oddly.
I binded the array to the components so that they can send the Sortable order to update the array. The array seems to update correctly, but the actual list becomes very janky: double moving items and undoing moves. I can’t wrap my head around what exactly is causing this.
REPL
App.svelte
<script>
import List from "./List.svelte";
let items = [
[
{id: 1,name: "one"},
{id: 2,name: "two"},
],
[
{id: 3,name: "three"},
{id: 4,name: "four"},
]
]
</script>
{#each items as category, i}
<h2>Category {i}</h2>
<ul>
<List bind:fullArr={items} index={i}>
{#each category as item}
<li data-id={item.id} >{item.name}</li>
{/each}
</List>
</ul>
{/each}
{JSON.stringify(items)}
List.svelte
<script>
import Sortable from 'sortablejs';
import { onMount } from 'svelte';
export let fullArr;
export let index;
let arr = fullArr[index];
let list;
let sortable;
onMount(() => {
sortable = new Sortable(list, {
group: "list",
onSort: onSort,
});
})
function onSort(){
const order = sortable.toArray()
fullArr[index] = order.map(id => {
//id is searched from full array to account for item going between lists
return fullArr.flat().find(item => item.id == id)
})
}
</script>
<div bind:this={list}>
<slot></slot>
</div>
There is this similar question, but the solution seems to only apply to a singular list and not a group of lists
