Cursor - Dnd Kit — ContextQMD

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:

<CodeGroup> ```ts Vanilla import {DragDropManager, Cursor} from '@dnd-kit/dom';

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


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

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

vue

<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>

svelte

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

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

tsx

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

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

</CodeGroup>

Options

<ParamField path="cursor" type="string" default="grabbing"> The CSS cursor value to apply to the document body during drag operations. </ParamField>