Make drag and drop relative to pointer

[paralin]

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 immediately? I want the dragged item to be located directly below the pointer instead of relative to its original position.

[x-Foz3R-x]

is what are you after the collisionDetection={pointerWithin} on dndContext imported from "@dnd-kit/core"?

[paralin]

Changes the collision detection but not the positioning.

[paralin]

https://stackoverflow.com/a/78527248/431369

I have not tried it yet but this seems like the answer:

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.