Feedback - Dnd Kit — ContextQMD

Overview

The Feedback plugin manages the visual appearance of elements during drag operations. It promotes dragged elements to the browser's top layer using the Popover API, and injects CSS rules to handle positioning and to reset browser default popover styles.

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

Configuration

Use Feedback.configure() to customize the drop animation or other options:

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

const manager = new DragDropManager({ plugins: (defaults) => [ ...defaults, Feedback.configure({ dropAnimation: null }), ], });


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

function App() {
  return (
    <DragDropProvider
      plugins={(defaults) => [
        ...defaults,
        Feedback.configure({ dropAnimation: null }),
      ]}
    >
    </DragDropProvider>
  );
}

vue

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

<template>
  <DragDropProvider
    :plugins="(defaults) => [...defaults, Feedback.configure({ dropAnimation: null })]"
  >
    <!-- ... -->
  </DragDropProvider>
</template>

svelte

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

<DragDropProvider
  plugins={(defaults) => [...defaults, Feedback.configure({ dropAnimation: null })]}
>
  <!-- ... -->
</DragDropProvider>

tsx

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

function App() {
  return (
    <DragDropProvider
      plugins={(defaults) => [
        ...defaults,
        Feedback.configure({ dropAnimation: null }),
      ]}
    >
    </DragDropProvider>
  );
}

</CodeGroup>

Per-entity configuration

In addition to global configuration on the DragDropManager, you can configure the Feedback plugin on individual draggable or sortable entities using Feedback.configure() in the entity's plugins array. Per-entity options override the global configuration for that entity.

<CodeGroup> ```tsx React import {useDraggable} from '@dnd-kit/react'; import {Feedback} from '@dnd-kit/dom';

function Draggable({id}) { const {ref} = useDraggable({ id, plugins: [ Feedback.configure({ feedback: 'clone', dropAnimation: null, }), ], });

return <button ref={ref}>Draggable</button>; }


```ts Vanilla
import {Draggable, Feedback} from '@dnd-kit/dom';

const draggable = new Draggable({
  id: 'draggable-1',
  element,
  plugins: [
    Feedback.configure({
      feedback: 'clone',
      dropAnimation: null,
    }),
  ],
}, manager);

</CodeGroup>

Per-entity options

<ParamField path="feedback" type="FeedbackType"> The type of visual feedback to show during drag for this entity.

'default' — the original element moves with the drag
'clone' — a copy of the element stays in place while the original moves
'move' — the element moves without a placeholder
'none' — no visual feedback (useful for custom drag overlays) </ParamField>

<ParamField path="dropAnimation" type="DropAnimation | null"> Customize or disable the drop animation for this entity. Overrides the global `dropAnimation` option. </ParamField>

Global options

<ParamField path="dropAnimation" type="DropAnimation | null"> Customize or disable the drop animation that plays when a dragged element is released.

undefined (default) — use the built-in drop animation
null — disable the drop animation entirely
DropAnimationOptions — customize the duration and easing of the built-in animation
DropAnimationFunction — provide a fully custom animation function </ParamField>

<ParamField path="keyboardTransition" type="KeyboardTransition | null"> Customize or disable the CSS transition applied when moving elements via keyboard.

By default, keyboard-driven moves animate with 250ms cubic-bezier(0.25, 1, 0.5, 1). This transition is automatically disabled when the user prefers reduced motion.

undefined (default) — use the built-in keyboard transition
null — disable the transition (moves are instant, like pointer operations)
{ duration, easing } — customize the transition duration (in ms) and CSS easing function </ParamField>

<ParamField path="rootElement" type="Element | ((source: Draggable) => Element)"> An element (or a function returning one) to use as the root container for the dragged element. When set, the dragged element is moved into this container during the drag operation. </ParamField>

CSS Cascade Layer

The Feedback plugin uses a CSS cascade layer named dnd-kit to reset user-agent popover styles (such as background, border, margin, and padding) that browsers apply to elements promoted to the top layer.

By default, this layer is injected at the beginning of the document's <head>, giving it the lowest cascade priority. This means your styles will take precedence without needing !important.

If you use a CSS framework that defines its own cascade layers (such as Tailwind CSS v4), you can explicitly declare the dnd-kit layer first to ensure it has the lowest priority:

css

@layer dnd-kit, base, components, utilities;