react dnd beautiful - nested dropzone

Question

I'm attempting to create both a vertical and a horizontal list, and to add elements to them from an external source. The issue I'm encountering is that the horizontal dropzone isn't activating correctly. It functions well on the left side, but it doesn't work on the right side. Below is a simple example:

dnd example

I tried to deactivate first dropzone, when nested component is drag over, but my own event doesn't work.

Correct:

left side

Wrong:

right side

Answer 1

You may disable the parent droppable while your mouse is over the child drop zone.

I defined a state called isDisabled and I set it to true onmouseenter the child and false after leaving.

And it worked as expected.

preview the fix here