Is it possible to extend this to support dragging between lists?

[mattgi]

Very clean library and eager to use it for my use case.

However, I am wondering if its possible to support multiple lists where I can drag items between lists, but also reorder the lists themselves.

So a structure like:

<script lang="ts">
  import { SortableList, sortItems } from "@/components/behavior/sortable";
  let items = [
    {
      id: 1,
      items: [
        { id: 1.1, items: [] },
        { id: 1.2, items: [] },
      ],
    },
    {
      id: 2,
      items: [
        { id: 2.1, items: [] },
        { id: 2.2, items: [] },
        { id: 2.3, items: [] },
      ],
    },
    {
      id: 3,
      items: [
        { id: 3.1, items: [] },
        { id: 3.2, items: [] },
        { id: 3.3, items: [] },
        { id: 3.4, items: [] },
      ],
    },
  ];

  function handleSort(event: CustomEvent) {
    const { prevIndex, nextIndex } = event.detail;
    items = sortItems(items, prevIndex, nextIndex);
  }
</script>

<SortableList {items} let:item direction="horizontal" on:sort={handleSort}>
  <div class="border p-4 justify-center items-center flex flex-col">
    {item.id}
    <SortableList items={item.items} let:item direction="vertical">
      <div class="border p-4 justify-center items-center flex flex-col">
        {item.id}
      </div>
    </SortableList>
  </div>
</SortableList>

Ideally, using <svelte:self /> it could be nested deeply. Do you think this is achievable?

[rodrigodagostino]

Hi, @mattgi! :) My apologies for the delay, it’s been a busy week.

Well, I’ve got some good news for you, because I’m currently working on an important refactoring to improve the overall flexibility of the package, and I’m hoping it will help facilitate something like nested lists. I don’t think it will be possible to drag and drop items between lists out of the box, but nesting lists should be feasible.

It’s hard for me to give you an expected delivery date, but I’ll drop another comment when this is available ;)