Drop child element from list rendered inside portal to parent div with Droppable context

Question

I have a Draggable section within which element opens popover (as React portal) containing list of items, I was trying to drag the child element from popover and drop outside popover over the Droppable section outside. How can it be achieved?

What I tried:

• Wrapped the list items inside the popover within Draggable to make items draggable but it doesn't allow dropping outside the portal

Answer 1

Build a workflow of what you want to achieve and then track actions and events for each step of your workflow.

1. Over on a child element of a draggable section => Open a modal.
2. Drag a child element outside of the modal boundry => Close the modal
3. Drop a element inside a droppable section => Catch the event and update the droppable section with a new child => Done!

Break your goal into to small step. That is the best way! You can get some insights from the stackoverflow question (link)