Fixed-position headers in react-beautiful-dnd droppable

987 views Asked by At

I have a list of items that have periodic header labels to group the items visually. I want the headers to stay in place while dragging. However, all headers below the dragging item move up by (seemingly) the height of the item.

How can I get the headers to stay in place?

BeforeOn drag

The headers are labeled with the index of the item they're supposed to go before.

I've tried using multiple droppables but then there are two slots for items to go (at the end of one droppable and the start of the next) rather than one.

0

There are 0 answers