Dragging over child elements of a drop zone causes a drag leave to fire

[dantheother]

I'm trying to setup a kanban style board, where every card can be dragged to a different column So, each column is a element, and each card within it is a element. I'd like to highlight the drop zone, so I'm capturing the dragenter and dragleave events. Unfortunately, the dragleave event fires whenever I drag over any other cards in the column.

Minimal repro https://jsfiddle.net/10f674rz/2/

I think I'll be able to code around it by tracking dom node for the drag enter and checking if the dom node for the drag leave is a child of the last drag enter, if it is then don't unhiglight the column. Or maybe wrapping every child element in a drop so that I can capture that dragenter and rehighlight the column.

[naton]

Don't know if you want a fancier solution, but you could do something like .drag {pointer-events: none;} on the drag start event (minus the one you're draggin perhaps).

[lukeschafer]

This is a massive cause for frustration lol