How to handle free drag'n drop with dnd-kit?

Question

I'm trying to create a simple sticky notes app by using @dnd-kit. I've found a lot of sortable examples, but can't find any free drag'n-drop examples. I've created a simple codesandbox to help you understand my problem. I'm able to drag and drop, but I can't set the final drop position. I believe the work should be done under the handleDragEnd function.

Appreciate any help!!!

https://codesandbox.io/s/dnd-kit-free-drag-n-drop-24nnbk

Answer 1

You want to save a position on the note to keep track of where it has been dragged to. You can use the event object passed to the onDragEnd event to see where the note has been dragged to and use that to update the position of the note.

I forked your codesandbox and updated it to handle this.

https://codesandbox.io/s/dnd-kit-free-drag-n-drop-forked-gj9qmt