How to prevent dragleave interfering with dragenter event on nested dropzone element?

Question

With two nested elements in dropzone and dragging from outer to inner element, dragleave actions take precedence over dragenter.

I have initially one div as dropzone, which on dragenter changes class ('canDrop') to indicate if drop is possible, while on dragleave the class reverts to neutral ('plainDropZone').

On drop the draggable div becomes a child of the dropzone div. Now, when another draggable enters the dropzone, class is changed to 'noDrop' to indicate no more drops are possible. On dragleave the class reverts to neutral again ('plainDropZone')

The Problem: When dragging from outer dropzone div to the inner dropped div, the outer dropzone div should not revert to neutral, but still have the class 'noDrop'.

As far as I have found out this does not work as intended, because when moving from outer to inner div, dragleave gets fired after dragenter. This thread visualizes the problem nicely: HTML 5 drag events: 'dragleave' fired after 'dragenter'

Here is a full demo: https://jsfiddle.net/e12uadgh/

So what would be a way to assign the outer dropzone div the class 'noDrop', when it has a dropped inner div and the user drags a third div from outer dropzone div to inner dropped div?

Answer 1

Found a way to achieve the effect. When dragging an element from outer dropzone div to inner dropzone div, dragleave for outer div is fired after dragenter for inner div, so that any changes on dragenter get overridden by the changes made on dragleave.

So one solution is to make only changes on dragleave, if the next event target is not the inner div. Since this can not be done by examining event.target on dragleave, we can use a toggle instead, which is set to true on dragenter on inner div, and which becomes false on dragleave on inner div.

Here is a demo: https://jsfiddle.net/rookie_sen/2Lp5qg39/5/