dnd-kit: drag relative to mouse pointer instead of draggable

Question

Using @dnd-kit/core the default behavior is to have the dragged element (and the div within the DragOverlay) be dragged relative to its original position. If I click and drag the Draggable at some offset from the origin of the Draggable, it will move relative to its original position with an offset according to the distance I have dragged the pointer.

How can I instead have the dragged item "jump" to the location of the pointer? The dragged item should be located directly below the pointer instead of relative to the original position.

Answer 1

Snap cursor to center: install @dnd-kit/modifiers and pass snapCenterToCursor into DragOverlay:

<DragOverlay modifiers={[snapCenterToCursor]}> <YourDraggableComponentCopy /> </DragOverlay>

Collision detection: add collisionDetection={pointerWithin} prop to DndContext:

<DndContext collisionDetection={pointerWithin}>...</DndContext>

See the "Pointer within" docs for more info.