useDragOperation

Reactively read the current drag source and target from any descendant of a DragDropProvider.

Overview

useDragOperation returns a reactive snapshot of the current drag operation’s source and target. Any component nested inside a DragDropProvider can call this hook to read live drag state and re-render whenever it changes — without subscribing to events manually.

Use it when you need ambient awareness of a drag in progress (for example, to highlight a drop zone, render an overlay, or disable an unrelated UI affordance during a drag).

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

function DraggingIndicator() {
  const {source, target} = useDragOperation();

  if (!source) return null;

  return (
    <div role="status" aria-live="polite">
      Dragging <strong>{String(source.id)}</strong>
      {target ? <> over <strong>{String(target.id)}</strong></> : ' over no target'}
    </div>
  );
}

function App() {
  return (
    <DragDropProvider>
      <DraggingIndicator />
      {/* ...draggables and droppables... */}
    </DragDropProvider>
  );
}

The hook subscribes to changes via reactive computeds, so the calling component re-renders only when source or target actually changes — not on every pointer move. If you need pointer-level updates, use useDragDropMonitor instead.

API Reference

Output

source · Draggable | undefined

The currently dragged Draggable instance, or undefined when no drag is in progress.

target · Droppable | undefined

The Droppable instance the source is currently over, or undefined if the source is not over any drop target.

Related

• useDragDropMonitor — subscribe to lifecycle events (dragstart, dragmove, dragover, dragend)
• useDragDropManager — read the underlying manager for advanced use cases