Feedback

Overview

The Feedback plugin manages visual feedback during drag operations. It is included by default and handles element promotion to the browser’s top layer and drop animations.

This guide covers common React patterns and troubleshooting.

Configuring feedback globally

To configure feedback for all draggable elements, pass a plugins function to DragDropProvider:

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

function App() {
  return (
    <DragDropProvider
      plugins={(defaults) => [
        ...defaults,
        Feedback.configure({dropAnimation: null}),
      ]}
    >
      {/* All draggable elements will have no drop animation */}
    </DragDropProvider>
  );
}

Per-draggable feedback

Configure feedback on individual elements via the plugins option in useDraggable or useSortable:

import {useDraggable} from '@dnd-kit/react';
import {Feedback} from '@dnd-kit/dom';

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

  return <div ref={ref}>Drag me (clone stays behind)</div>;
}

Feedback modes

The feedback option controls how the element behaves during drag:

Drop animations

Disabling the drop animation

Feedback.configure({dropAnimation: null})

Customizing the drop animation

Feedback.configure({
  dropAnimation: {
    duration: 300,   // milliseconds (default: 250)
    easing: 'ease',  // CSS easing (default: 'ease')
  },
})

Custom animation function

For full control, provide a function that returns a Promise:

Feedback.configure({
  dropAnimation: async ({element, translate}) => {
    await element.animate(
      [{transform: `translate3d(${translate.x}px, ${translate.y}px, 0)`}, {transform: 'translate3d(0, 0, 0)'}],
      {duration: 200, easing: 'ease-out'}
    ).finished;
  },
})

Troubleshooting

Duplicate items after data refetch

When using sortable lists with React Query or other data fetching libraries, you may see duplicate items after a refetch. This happens because the OptimisticSortingPlugin has moved DOM elements during the drag, and the refetched data renders new elements in the updated positions.

See Integration with external state for how to solve this by deferring state sync until the drag is complete.

Double animation or snap on drop

If items snap into position twice after dropping, your state update is likely conflicting with the drop animation. The Feedback plugin animates the element back, then your state update triggers a re-render that moves it again.

To fix this, disable the drop animation:

Feedback.configure({dropAnimation: null})

Or ensure your state update matches the final position by using the move helper from @dnd-kit/helpers in onDragEnd, which correctly reconciles the optimistic position with your state.