Separator after x elements, that stays in place during drag

[fmiglianico]

Hey everyone :)

I'm trying to have a separator between my 3rd and 4th element in a <Droppable/>.

It's pretty easy to have the separator before drag and after drag, the problem is when it comes to have it stay in its place 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 the API 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 when an element has moved up/down the list ? Or is it possible to add a specific class when an element is being translated up/down ?

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