Below is a layout of the table:

Below is a layout of the table:

We are using @hello-pangea/dnd lib and there was a need to enable disableInteractiveElementBlocking (we want to enable drag on button children). From offical docs we can see that enabling this will “…render the interactive element unusable” but I would like to know more details.

I’m looking to recreate something like this (https://dnd.hellopangea.com/iframe.html?args=&globals=backgrounds.grid:!false&id=examples-board–scrollable-columns&viewMode=story) wherein there’s a vertically-scrollable list of horizontally-scrollable lists, and the outer lists can be reordered and the tasks within the lists can be dragged both within their original list and to other lists. I’m able to achieve that, but I’m not able to have the outermost container scroll when a task is being dragged from one horizontal list to another.

I have a problem because I can’t handle nested elements.

I have a modal. Inside the modal there is a div2 consisting of div1 and dnd. When you drag an item from div2 towards div1, the item should not be visible. It should appear as if the item’s zIndex is 0. Do you know these methods?

react-beautiful-dnd, how to prevent visual changes to indexes. I have two columns and when I take an object in one specific column, I don’t want to visually see the displacement of other objects when moving it along this column, I only want to move it to the second one.