Cursor Plugin - dnd kit

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:

TypeScriptReactVueSvelteSolid

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

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

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

function App() {
  return (
    <DragDropProvider
      plugins={(defaults) => [
        ...defaults,
        Cursor.configure({ cursor: 'move' }),
      ]}
    >
      {/* ... */}
    </DragDropProvider>
  );
}

<script setup>
import {DragDropProvider} from '@dnd-kit/vue';
import {Cursor} from '@dnd-kit/dom';
</script>

<template>
  <DragDropProvider
    :plugins="(defaults) => [...defaults, Cursor.configure({ cursor: 'move' })]"
  >
    <!-- ... -->
  </DragDropProvider>
</template>

<script>
  import {DragDropProvider} from '@dnd-kit/svelte';
  import {Cursor} from '@dnd-kit/dom';
</script>

<DragDropProvider
  plugins={(defaults) => [...defaults, Cursor.configure({ cursor: 'move' })]}
>
  <!-- ... -->
</DragDropProvider>

import {DragDropProvider} from '@dnd-kit/solid';
import {Cursor} from '@dnd-kit/dom';

function App() {
  return (
    <DragDropProvider
      plugins={(defaults) => [
        ...defaults,
        Cursor.configure({ cursor: 'move' }),
      ]}
    >
      {/* ... */}
    </DragDropProvider>
  );
}

Options

cursor

string

default: grabbing

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