Intersection Observers with DOM siblings

I need to create a list with drag and drop reordering in HTML/Js where overlap/intersection of elements is detected like here:

I'm currently looking at the Intersection Observer API to detect when list items are overlapping, but most tuts and examples are focused on things coming in and out of viewport (i.e. infinite scrolling, lazy loading etc). The WC3 -spec also talks about how there needs to be a root element and that intersection is observed on it's children. However in the case above the list items are siblings in the DOM, not ancestors and children.

Is Intersection Observers not our game here or is there some way to detect when children overlap?