Groups of lists

List of number example

With Fluid DnD you can drag and drop element between two or more list.
We’ll define two list and pass to droppableGroup parameter the same group name:

<script lang="ts">
...
const list1 = $state([1, 2, 3, 4]);
const [ parent1 ] = useDragAndDrop(list1, {
  droppableGroup: "group1",
});
...
const list2 = $state([5, 6, 7, 8]);
const [ parent2 ] = useDragAndDrop(list2, {
  droppableGroup: "group1",
  direction: "horizontal",
});
</script>

Creating the view

After, we’ll create the two lists on the view:

<div class="group-list">
  <ul ref="parent1" class="number-list">
    {#each list as  element, index (element)}
      <li class="number" data-index={index}>
        { element }
      </li>
    {/each}
  </ul>
  <div ref="parent2" class="number-list-h">
    {#each list2 as  element, index (element)}
      <li class="number" data-index={index}>
        { element }
      </li>
    {/each}
  </div>
</div>
<style>
 ...
</style>

Preview

More than one group

A list can belong to more than one group. So, you can only drag and drop element from one list to another if the groups to which the list belongs are found in the other.

Example: If the list A belongs to G1 group and the list B belongs to G1 and G2 groups. You can only drag elements from the list A to B not the other way around.

Example

We’ll change the early code adding another group:

<script lang="ts">
...
const list1 = $state([1, 2, 3, 4]);
const [ parent1 ] = useDragAndDrop(list1, {
  droppableGroup: "group1",
});
...
const list2 = $state([5, 6, 7, 8]);
const [ parent2 ] = useDragAndDrop(list2, {
  droppableGroup: "group1 group2",
  direction: "horizontal",
});
</script>