Complex usage with draggable items id collision

[psd-coder]

Hey! I’m from @httpie and we are currently working on enhanced d&d in the app. I met one case and want to discuss it here. What we have: there are items inside collections and they should be able sorted. Also we should be able to move items from one collection to another one. The problem that we can have two instances of the same collections on the screen in the same time.

I prepared sandbox with the similar case: https://codesandbox.io/s/exciting-lena-9cf8f7. Here we can sort items inside collections and can move item from the second collection to the first one: it works only for the second instance on the right side. Also there is bug with the overlay. And the nature of both is the same: items should have unique IDs in the same DndContext according to the documentation.

We can solve it by providing some unique prefix to items, for example and it’ll fix overlay: https://codesandbox.io/s/competent-bash-3iery1, but break item drag between collections with different prefixes. As I understand it’s because active still has old item id, with the wrong prefix and it don't match with any item in the updated collection.

So the final questions:

• is it correct way to achieve what we want (I mean using prefixes)?
• How we can update active data during drag and should we? Is there any other option?

[pstrassmann]

I think the prefixes is the right way to go. Regarding the other issue, would it be possible for you to extend your onDragOver and/or onDragEnd logic to ensure the correct element is moved to all appropriate collections no matter the prefix? Because you have full control over how the data for all collections changes on the dragOver and dragEnd events, I'm just wondering if the solution might be in extending the logic there rather than updating the active data.

[psd-coder]

I use onDragOver here for moving item from one collection to another one and onDragEnd here for reordering items inside collection. When I move item from collection in the sidebar (which has prefix sidebar) to the collection on the right side (which has prefix main) reordering stops working. It looks like react re-renders collections and appended item on the right side now has id: main-${id} while active element still has sidebar-${id} id and that's why it breaks collision detection. And collision detection works with the active which is stored inside of DndContext component. This is my assumption and I'm trying to understand how to better solve it and get necessary result.

[psd-coder]

@clauderic It's really rude to mention you and I'm sorry for that, but I really need help here. It seems only you can know how to properly handle such case, since you are an author