Deal with dragEnter and dragLeave events

dragEnter and dragLeave have the same problem as mouseIn and mouseOut events – if the drop target has children elements, dragEnter and dragLeave events fire when your mouse is crossing boundaries of those children elements.

The solution? One is pointer-events:none for the children elements. The other is to manually count the dragEnter (counter++) and dragLeave events(counter–), and declare a true mouseLeave only when the counter returns to zero.

HTML5 drag and drag API are pretty tricky to use …