how to handle copy item?

[dm-de]

i have 2 areas
left: draggable items (id's should not change)
right: sortable items

i want to copy dragable items (using cloneDeep, because it is a tree) into sortable items
if i do this, i need to generate new id's

i do this (on adding to right sortable):

1. deep clone dragable item data object
2. regenerate id's for clone data
3. add to sortable
4. i also update id on selected DragOverlay

but now, my sortable item do not respond to move

i think, i need to change somewhere else internally id of my active dragged item (because it is changed during dragging!)
But how and where?

[clauderic]

I think you've got the right idea in terms of how to build this and it sounds like you're almost there.

This isn't a use-case I've personally tried building, so my best guess would be that you have to wait until after the draggable item is dropped before changing the id of the cloned item.

Would be helpful if you could provide a CodeSandbox if you need further assitance.

[rmstsd]

https://codesandbox.io/p/sandbox/determined-shaw-dggmrv

I want to copy the 'a' on the left side to the right side and generate a new id on the right side, and after copying it, I can't drag the left side the 'a'. It is very queer.

[rmstsd]

What I want to end up with is something like the form in the example below, except I want to copy it instead of moving it.

https://master--5fc05e08a4a65d0021ae0bf2.chromatic.com/?path=/story/presets-sortable-multiple-containers--basic-setup

[ktml]

I had exactly the same issue. I solved my problem by generating the ids for items beforehand, and replace the used items (that have been dragged) with object with new ids. Think of the draggable items area as a vending machine.

So in your case, a possible solution:

left: draggable items, they are deep clone data objects of the originals with a new generated ids
right: sortable items

After an item being dragged and added to the sortable list, simply replenish the left area — replace the dragged item with a new copy with new generated id, or simply replace the id.

[volodymyrdn]

I have similar solution, but I had encountered another problem: after an item being hovered and added to the sortable list (but not dropped), and the 'original' item is replaced with the new one with new id, and then the dragged item is dropped ouside of the droppable context, there is no 'cancelDrag' animation, because, I assume, dnd-kit does not know where it was, because of id change:

There you can see, cancel animation works if you drag and drop an item outside of the dnd context. But if you first drag it to the sortable list (to the left), and only then drop it outside od dnd context, the animation does not work. Any ideas how to fix this? Thanks in regards.

[ktml]

@volodymyrdn I bumped into similar issue for a different reason.

My solution in my case was disabling the drop animation all together.

<DragOverlay dropAnimation={null} ...  />

It's not a perfect selection since you then lose the drop animation, but the behaviour would be more consistent.

[volodymyrdn]

Solved this. The dragged item does not get randomly generated ID, but gets only some preffix to the ID. If dragging is successfully ended, I replace ids with that prefix with randomly generated. But if dragging was canceled (like dropping outside of the drop area), i remove that prefix from the id, so the item gets its original id, and the animation works as expected.