0

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..

koox00
  • 2,691
  • 2
  • 15
  • 25

2 Answers2

0

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

Andrew Xia
  • 365
  • 1
  • 11
  • 1
    ok good option but that I need is when I'm dragging in a spot where there is not a columns to drop it, it allows me a columns dynamically to drop the element that I'm dragging in that moment. For Example: I have 2 columns of elements but I drag a new element and I want tot drop it in de middle of the 2 columns. I would need to create dynamically a new columns in the middle of 2 columns already created, also at the same time drop the element in that column that I created dynamically. –  Aug 21 '19 at 15:02
  • Add the empty columns anyway? Style them different? Maybe a + symbol when empty? – Jason J. Nathan Apr 23 '20 at 06:40
0

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 determine 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

dpdearing
  • 1,726
  • 3
  • 17
  • 21