Primitive Example of dragging from source list and cloning into sortable destination list

[LordZardeck]

I've been trying to work on having a sortable list that can be dragged to, creating a new item when dropped, in place. At first it was pretty difficult to figure out, as you can't have the same unique ID twice in the same context. I also needed it to be fairly generic and independent solution as we have multiple source areas that can only go to specific destination areas. This means I couldn't have the even handlers within the root context.

I started out by cloning the dnd-kit repo, stripping apart the multiple containers sortable story, and finally got it working. How I solved it was by checking in my source list if the active item exists in the destination container. If it does, we switch off from having the source item render a sortable to just rendering a plain component. This allows for the destination list to now "own" the sortable for the time being, with it's ID matching the active one. Then once we drop the component, we generate a new ID for the destination item, "releasing" the ID to be used as a sortable on the source list once again.

Here's a demo if anyone is interested: https://codesandbox.io/p/sandbox/dndkit-drag-clone-xfpzrk