I have a list of components and the list should have
display:flex;
flex-wrap: wrap;
css properties. I don't want to let the user change the sorts of the list. So the items doesn't have to be sortable. What I want is combining two items by using drag and drop. By combining them I mean merging two items and show the user the contents of the both items after combining them.
I have used react-beautiful-dnd. But I have two problems with this library.
1- This library doesn't support the wrapped lists. So the user experience is very bad while you are trying to drag one item and drop on another item. Because of the wrap property all the items are always moving around and it is so hard to find the right spot for dropping the item.
2- This library doesn't allow to combine the items without the sortable setup. So you need to give the user the ability of sorting the list if you want to give him the ability of combining items.
I have searched a solution for these problems but it seems that I can't achieve my goal here with react-beautiful-dnd library. Even it will be much more harder for me, I can also try to solve the problem with only React, without using any external library. So the solution way is not really matter.
If the only way to solve the problem is letting the user to sort the list, I am also okay with this.
My app is very similar to this one https://codesandbox.io/s/6b3m5 . If you make the list of this app row-direction and flex-wrap:wrap;, you will experience my problem.
If you need further information, I will provide immediately.
