En primer lugar, esto se está diseñando en Vue, pero el problema parece ser puramente HTML.

Básicamente, la lista se presenta en el siguiente formato

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

Los elementos separadores comienzan en 0px, y en el evento dragstart() de un elemento, se establecen en una altura que hace que se superpongan a los elementos y se usan para detectar dónde se debe colocar el elemento en la lista. Esto funciona perfectamente en Firefox, sin embargo, Chrome parece tener un problema con los elementos que se superponen con otros elementos al arrastrar, e inmediatamente hace que se detenga el arrastre, lo que activa el evento dragend() .

Intenté mantener la altura constante y deshabilitar/habilitar los eventos de puntero al arrastrar, sin embargo, es el mismo resultado.

Aquí hay una reproducción HTML pura del error en un codepen https://codepen.io/zHixson/pen/ZExzyyM . Funciona en Firefox, no en Chrome, igual que el original

¿Alguien tiene experiencia en el manejo de este problema antes y conoce la solución?