Skip to main content

​
Overview

The Debug plugin renders visual overlays that help you understand what’s happening during drag and drop operations. It displays the shapes of draggable and droppable elements, highlights collision targets, and shows the current pointer position. This plugin is not included by default — add it during development to help debug layout, collision, and positioning issues.

​
Usage

import {DragDropManager} from '@dnd-kit/dom';
import {Debug} from '@dnd-kit/dom/plugins/debug';

const manager = new DragDropManager({
  plugins: (defaults) => [...defaults, Debug],
});
The Debug plugin is intended for development only. Remove it before shipping to production.

​
Example

​
What It Shows

  • Draggable shape (blue overlay): The computed bounding rectangle of the element being dragged.
  • Droppable zones (gray overlays): The bounding rectangles of all registered droppable elements.
  • Drop target (green overlay): The current drop target.
  • Top collisions (yellow overlays): The next closest collision candidates.
  • Pointer crosshair: The current pointer position tracked by the drag operation.