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 lang="ts">
...
let droppableGroup = $state<HTMLElement>(null)
function onDragStart(){
  const droppables = droppableGroup?.querySelectorAll('.droppable-group-group1')??[]
  for (const droppable of [...droppables]) {
    droppable.classList.toggle('marked-droppable',true)
  }
}
function onDragEnd (){
  const droppables = droppableGroup?.querySelectorAll('.droppable-group-group1')??[]
  for (const droppable of [...droppables]) {
    droppable.classList.toggle('marked-droppable',false)
  }
}
const [ parent1 ] = useDragAndDrop<number>(list, {
  droppableGroup: "group1",
  onDragStart,
  onDragEnd,
});


const list2 = $state([6, 7, 8, 9, 10]);
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:

<div bind:this={droppableGroup}  class="group-list">
  <ul use:parent1 class="number-list">
      <!-- ... -->
  </ul>
  <div use:parent2 class="number-list-h">
      <!-- ... -->
  </div>
</div>

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 lang="ts">
import { type DragEndEventData, type DragStartEventData } from "fluid-dnd";
//...
let draggedElement = $state<number | null>()
let lastDroppedElement = $state<number | null>()
function onDragStart(data: DragStartEventData<number>){
  draggedElement = data.value;
  //...
}
function onDragEnd (data: DragEndEventData<number>){
  lastDroppedElement = 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 lang="ts">
import { type DragOverEventData } from "fluid-dnd";
//...
let currentDragOver = $state<string>('')


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


const [ parent1 ] = useDragAndDrop<number>(list, {
  droppableGroup: "group1",
  onDragOver,
});


const list2 = $state([5, 6, 7, 8]);
const [ parent2 ] = useDragAndDrop(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:

<div class="my-6">
  <h4>Current drag over: <span class="!text-[var(--sl-color-white)]">{currentDragOver || 'None'}</span></h4>
</div>


<div bind:this={droppableGroup} class="group-list bg-[var(--sl-color-gray-6)]">
  <h5 class="mb-2">List 1</h5>
  <ul use:parent1 id="list1" class="number-list">
    {#each list as element, index (element) }
      <li class="number" data-index={index}>
        { element }
      </li>
    {/each}
  </ul>
  <h5 class="mb-2">List 2</h5>
  <div use:parent2 id="list2" class="number-list-h">
    {#each list2 as element, index (element) }
      <div
        class="number"
        data-index={index}
      >
        { element }
      </div>
    {/each}
  </div>
</div>

Preview

Current drag over: None

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