​
Usage

The useDragDropMonitor hook allows you to monitor drag and drop events within a DragDropProvider:

import {useDragDropMonitor} from '@dnd-kit/react';

function DragMonitor() {
  useDragDropMonitor({
    onBeforeDragStart(event, manager) {
      // Optionally prevent dragging
      if (shouldPreventDrag(event.operation.source)) {
        event.preventDefault();
      }
    },
    onDragStart(event, manager) {
      console.log('Started dragging', event.operation.source);
    },
    onDragMove(event, manager) {
      console.log('Current position:', event.operation.position);
    },
    onDragOver(event, manager) {
      console.log('Over droppable:', event.operation.target);
    },
    onDragEnd(event, manager) {
      const {operation, canceled} = event;

      if (canceled) {
        console.log('Drag cancelled');
        return;
      }

      if (operation.target) {
        console.log(`Dropped ${operation.source.id} onto ${operation.target.id}`);
      }
    },
    onCollision(event, manager) {
      console.log('Collisions:', event.collisions);
    }
  });

  return null;
}

Make sure to use the useDragDropMonitor hook within a component that is wrapped in a DragDropProvider component.

​
Events

EventDescriptionPreventableData
beforeDragStartFires before drag beginsYesoperation
dragStartFires when drag startsNooperation, nativeEvent
dragMoveFires during movementYesoperation, to, by, nativeEvent
dragOverFires when over a droppableYesoperation
collisionFires on droppable collisionYescollisions
dragEndFires when drag endsNooperation, canceled, nativeEvent

​
Notes

  • The hook must be used within a DragDropProvider
  • Event handlers receive both the event data and the manager instance
  • Use event.preventDefault() on preventable events to stop their default behavior
  • The dragEnd event includes a canceled property that replaces the old onDragCancel event