OnDrag events

List of number example

With Fluid DnD you can create events when you start dragging an element (onDragStart) or when it is dropped (onDragEnd).
We’ll define group of lists and add onDragStart and onDragEnd events that toggle marked-droppable class on droppables using a reference of the parent of those (droppableGroup):

<script setup lang="ts">
...
const droppableGroup = useTemplateRef('droppableGroup')
function onDragStart(){
  const droppables = droppableGroup.value?.querySelectorAll('.droppable-group-group1')??[]
  for (const droppable of [...droppables]) {
    droppable.classList.toggle('marked-droppable',true)
  }
}
function onDragEnd (){
  const droppables = droppableGroup.value?.querySelectorAll('.droppable-group-group1')??[]
  for (const droppable of [...droppables]) {
    droppable.classList.toggle('marked-droppable',false)
  }
}

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

Creating the view

After, we’ll create the two lists on the view and passing the droppableGroup reference:

<template>
  <div ref="droppableGroup" class="group-list">
    <ul ref="parent1" class="number-list">
        <!-- ... -->
    </ul>
    <div ref="parent2" class="number-list-h">
        <!-- ... -->
    </div>
  </div>
</template>
<style>
 ...
</style>

OnDrag events

List of number example

Creating the view

Preview