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 setup lang="ts">
...
const list1 = ref([1, 2, 3, 4]);
const [ parent1 ] = useDragAndDrop(list1, {
  droppableGroup: "group1",
});
...
const list2 = ref([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:

<template>
  <div class="group-list">
    <ul ref="parent1" class="number-list">
      <li
        class="number"
        v-for="(element, index) in list1"
        :index
        :key="element"
      >
        {{ element }}
      </li>
    </ul>
    <div ref="parent2" class="number-list-h">
      <div
        class="number"
        v-for="(element, index) in list2"
        :index
        :key="element"
      >
        {{ element }}
      </div>
    </div>
  </div>
</template>
<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 setup lang="ts">
...
const list1 = ref([1, 2, 3, 4]);
const [ parent1 ] = useDragAndDrop(list1, {
  droppableGroup: "group1",
});
...
const list2 = ref([5, 6, 7, 8]);
const [ parent2 ] = useDragAndDrop(list2, {
  droppableGroup: "group1 group2",
  direction: "horizontal",
});
</script>