First off, this is being designed in Vue, but the problem seems to be purely HTML.

Basically the list is laid out in the following format

[separator]
[element]
[separator]
[element]
[separator]
[element]
[separator]

The separator elements start out at 0px, and on an element's dragstart() event they get set to a height that causes them to overlap the elements and are used to detect where the element should be placed in the list. This works perfectly in Firefox, however Chrome seems to have an issue with elements overlapping other elements when dragging, and it immediately causes the dragging to stop, triggering the dragend() event.

I tried keeping the height consistent and disabling/enabling pointer events on drag, however it's the same result.

Here's a pure HTML reproduction of the bug in a codepen https://codepen.io/zHixson/pen/ZExzyyM. Works in Firefox, not in chrome, just like the original

Anyone have experience dealing with this issue before and know the solution?