Cursor

Updates cursor styles during drag operations.

Overview

The Cursor plugin overrides the cursor style on the entire document while a drag operation is in progress, providing visual feedback that an element is being dragged.

This plugin is included by default when creating a new DragDropManager.

Configuration

Use Cursor.configure() to customize the cursor style:

TypeScript

import {DragDropManager, Cursor} from '@dnd-kit/dom';

const manager = new DragDropManager({
  plugins: (defaults) => [
    ...defaults,
    Cursor.configure({ cursor: 'move' }),
  ],
});

Options

cursor · string · default: "grabbing"

The CSS cursor value to apply to the document body during drag operations.