-1

I have a working vertical column drag and drop React app using react-beautiful-dnd, but would like to 'invert' it so that Draggable items fall to the bottom of the Droppable div instead of floating to the top. Is this possible?

18nrankin
  • 1
  • 2

2 Answers2

0

If I'm understanding you correctly, you'd like to have a list where when the container is not full, the items within that list are aligned to the bottom of the container?

If so, then yes - I would utilize flexbox.

Here is a good resource for flex - https://css-tricks.com/snippets/css/a-guide-to-flexbox/

There are multiple different ways to implement this with flex. Pick your poison.

edit

Based on the code sandbox: I would add a wrapper div to the bay component with the same height as what you have now. On the child div, add a dynamic height field that is dependent on how many tables the bay contains.

Users won't be able to drop into the entire column but you could style it to show the user where they need to drop when the column is empty.

Bobby Gagnon
  • 80
  • 2
  • 11
  • Correct, I essentially want the area to act like a 'column-reverse' flex box. However, If I make my area contain a column-reverse flex box, the DND animations show the items moving to the top before it appears at the bottom.(https://giphy.com/gifs/I2K2YdpNpghqB7LsGC) – 18nrankin Oct 27 '20 at 22:32
  • Can you replicate in a sandbox? – Bobby Gagnon Oct 27 '20 at 22:34
  • Here's what I would do. Add a wrapper div to the bay component with the same height as what you have now. On the child div, add a dynamic height field that is dependent on how many tables the bay contains. Users won't be able to drop into the entire column but you could style it to show the user where they need to drop when the column is empty. I'd put it this in a sandbox but it's going to be a bit of work that I don't have time for right now. – Bobby Gagnon Oct 27 '20 at 22:55
  • I've updated the answer. Please mark it as the accepted answer. – Bobby Gagnon Oct 27 '20 at 23:03
0

I ended up just creating another invisible strip with flexGrow = 1 to push everything to the bottom.

18nrankin
  • 1
  • 2