Drag and Drop: Create columns dynamically when the element is dropped

Question

I'm using react-beautiful-dnd to copy and element drop into a columns previously created.

But I wonder if there is any possibility when I'm dragging an element and I drop it, it creates me the column dynamically to drop it ? could I make it ?

if react-beautiful-dnd doesn't work, what other plugin of React could do it ?

any suggestion..

Answer 1

I am curious about the same thing, but I suspect that it is not possible.

The approach I can think of is to make the parent of your droppable columns also a Droppable itself. Then onDragEnd you could dtermine where to insert a new column, automatically adding the Draggable.

While the documentation has a page for Changes while dragging, it includes these rules (and others) that make me think this approach will not work:

• You can only add or remove Draggables that are of the same type as the dragging item.
• You cannot add or remove a <Droppable /> during a drag.

Also note the warning (currently, at the top of the page) that changes while dragging are currently only supported in version 11.x

Answer 2

Yup, so first control your columns with some state variable say this.state.columns

Then, add an event listener, probably onDragEnd(). In the event handler, update your columns state so that the update occurs as you want