3

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

1 Answer 1

Reset to default
3

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

2
  • It dropping the element outside of container what if I want the element to drag and drop inside the container only?
    – sarfaraj shah
    Commented Apr 17 at 6:59
  • I'm trying to figure out how to do this while updating the props every frame.
    – Andy Ray
    Commented Apr 29 at 1:56

Not the answer you're looking for? Browse other questions tagged or ask your own question.