Skip to content
Fluid DnD
Examples

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>

Preview

  • 1
  • 2
  • 3
  • 4
  • 5
6
7
8
9
10

Use onDrag events params

You can use onDragStart and onDragEnd events to get more information about the dragging process. For example, you can get the value of the element that is being dragged and the value of the last element that was dropped. 

<script setup lang="ts">
import { type DragEndEventData, type DragStartEventData } from "fluid-dnd";
//...
const draggedElement = ref<number | undefined>(undefined)
const lastDroppedElement = ref<number | undefined>(undefined)
function onDragStart(data: DragStartEventData<number>){
  draggedElement.value = data.value;
  //...
}
function onDragEnd (data: DragEndEventData<number>){
  lastDroppedElement.value = data.value;
  //...
}
//...
</script>

Preview

Dragged element:

Last dropped element:

  • 1
  • 2
  • 3
  • 4
  • 5
6
7
8
9
10

onDragOver event

The onDragOver event is triggered continuously while a draggable element is being dragged over a droppable area. This event provides real-time feedback during the drag operation and can be used to display information about the current drag state.

<script setup lang="ts">
import { type DragOverEventData } from "fluid-dnd";
//...
const currentDragOver = ref<string>('')


function onDragOver(data: DragOverEventData<number>){
  const droppableElement = data.droppable as HTMLElement
  const droppableId = droppableElement.id || 'Unknown'
  currentDragOver.value = `Dragging ${data.value} over ${droppableId} at position ${data.targetIndex}`
}


const list1 = ref([1, 2, 3, 4]);
const [ parent1 ] = useDragAndDrop<number>(list1, {
  droppableGroup: "group1",
  onDragOver,
});


const list2 = ref([5, 6, 7, 8]);
const [ parent2 ] = useDragAndDrop<number>(list2, {
  droppableGroup: "group1",
  direction: "horizontal",
  onDragOver,
});
</script>

DragOverEventData interface

The DragOverEventData interface provides detailed information about the drag over event:

interface DragOverEventData<T> {
  index: number;        // Index of the dragged element in its original list
  targetIndex: number;  // Index where the element would be dropped
  element: Element;     // The dragged element
  value: T;            // The value of the dragged element
  droppable: Element;   // The droppable element being dragged over
}

Creating the view with onDragOver

You can display the current drag over information in your template:

<template>
  <div class="my-6">
    <h4>Current drag over: <span class="!text-[var(--sl-color-white)]">{{ currentDragOver || 'None' }}</span></h4>
  </div>
  <div ref="droppableGroup" class="group-list bg-[var(--sl-color-gray-6)]">
    <h5 class="mb-2">List 1</h5>
    <ul ref="parent1" id="list1" class="number-list">
      <li class="number" v-for="(element, index) in list1" :index :key="element">
        {{ element }}
      </li>
    </ul>
    <h5 class="mb-2">List 2</h5>
    <div ref="parent2" id="list2" class="number-list-h">
      <div
        class="number"
        v-for="(element, index) in list2"
        :index
        :key="element"
      >
        {{ element }}
      </div>
    </div>
  </div>
</template>

Preview

Current drag over: None

List 1
  • 1
  • 2
  • 3
  • 4
List 2
5
6
7
8