How do I get the bottom-most element, or, a list of all elements under my cursor?

Question

I'm creating a drag and drop system that includes sortables, and I'm trying to replicate jQuery's insertBefore/insertAfter behavior when hovering over a list of elements. As such, I have an element under my cursor and I want to put a placeholder where it would show up in the list.

I've tried:

• document.elementFromPoint - this only gives me the topmost element
• document.querySelectorAll(':hover') - this gives me the containing list and the dragged element, but not the intermediate element that I would insert a placeholder before/after
• checking event.toElement, .srcElement, etc.
• settings pointer-events: none on the dragged element - this just seems to remove it from the document.querySelectorAll ":hover" list

I want to avoid searching through all items in a list to see if my mouse cursor is inside their boundaries if possible, because I suspect it will be a huge performance hit.

Answer 1

Use document.elementFromPoint.

You need a list of displays and a list of elements.

For each element: (1) save the display string to a list, (2) set display to "none", (3) add the element to a list, and (4) check the element at the point again.

Then, go through the element list in reverse order and set the display back to what it was.