I’m trying to have a separator between my 3rd and 4th element in a react-beautiful-dnd <Droppable/>.
It’s pretty easy to have it before drag, after drag, the problem is when it comes to have it during drag. For example, if I drag my fourth element into 2nd place, I want to have these steps :
1 2 3 | 4 5
<< 4
1 2 3 | □ 5
<< 4
1 2 □ | 3 5
4
1 □ 2 | 3 5
1 4 2 | 3 5
while I drag my 4th element over.
For now, I’m using CSS to create the separator (border-bottom on li:nth-child(3)), I’d like to keep it this way if possible. One of the problem is that react-beautiful-dnd does not move html elements up and down the list, it transforms them using css translate(x,y), which is hard to track to know which elements are the 3rd and 4th at any point.
Is there any way to know an element has moved up/down the list using css ? Or to add a specific class when an element is being moved (moved by the api, not by the user dragging) ?
Also, using 2 lists with automated swapping seems complex for that kind of problem, but I might just have to go for it…
If anyone has an idea on how to achieve this, I’ll be very grateful 🙂
Cheers