Dragoverlay gap to cursor

[gandarufu]

Upon migrating to React 19.0.0 and Tailwind v4, I noticed that the DragOverlay jumps down roughly 55 pixels from the cursor, when I start dragging, and it keeps that offset. That wasn't the case before.

I can fix it with a negative marginTop, but I'd love to understand why this is happening.

<DragOverlay
adjustScale
// style={{ marginTop: "-55px" }}
>
   <div className='w-full h-12 bg-indigo-800'>Overlay</div>
</DragOverlay>

[jekor]

I'm noticing the overlay offset by the draggable item's margin (not the overlay's margin, which has none). Version is dnd-kit next 0.0.10.

[PandasProperty]

Also have this issue, please help

[xvawl]

After debugging through the Modifier feature and the rendered DOM, I found that the offset causing DragOverlay to shift is from a fixed container with transform: translate(-50%, -50%). In my case, it was the shadcn's Dialog component.

An elegant way to resolve this is rather simple: render the DragOverlay component to portal.

import React, {useState} from 'react';
import {createPortal} from 'react-dom';
import {DndContext, DragOverlay} from '@dnd-kit/core';

function App() {
  return (
    <DndContext>
      {createPortal(
        <DragOverlay>{/* ... */}</DragOverlay>,
        document.body,
      )}
    </DndContext>
  );
}

Links:

• Sample modifier's code
• Official Doc on DragOverlay portal

Hope it helps.

[clauderic]

This issue was opened against a previous version of dnd-kit. The library has since undergone a major rewrite.

It has been rebuilt from the ground up with support for multiple frameworks (React, Vue, Svelte, Solid, and vanilla JavaScript), improved performance, and a new API.

• Documentation: https://dndkit.com
• Migration guide: https://dndkit.com/react/migration
• GitHub: https://github.com/clauderic/dnd-kit

If this issue is still relevant to the latest version, please open a new issue.