React Drag and Drop - react-dnd - make component draggable and droppable at the same time (apply both roles - drag and drop)

Question

I created a simplified version of my app.

It is here: https://codesandbox.io/s/quirky-glade-x4h51

Current version has bookmarks (top row) and places for them. When used drags bookmark from bookmarks row and drops it to place, everything works fine. But what if user drag one of the places and want to move it somewhere?

I wrapped PlaceForChart component both to DropTarget() and DragSource() and exported wrapped component. But it is not working properly. If a remove any of wrappers, it will work.

Currently when user tries to drag any of PlaceForChart components (orange), the component changes color (as expected), but doesn't move.

How to make it work?

Answer 1

I changed key={Math.random()} in PlaceForChart.tsx and it started working. There are some other issues, but they are not related to dnd behavior. This was the main one.

Working version: https://codesandbox.io/s/billowing-wave-tjugx