Как предотвратить вмешательство dragleave в событие dragenter на вложенном элементе dropzone?

Question

С двумя вложенными элементами в dropzone и перетаскиванием из внешнего на внутренний элемент, dragleave действия имеют приоритет над dragenter.

У меня изначально один div как dropzone, который при перетаскивании изменяетсяclass ('canDrop'), чтобы указать, возможно ли удаление, в то время как при перетаскивании класс возвращается к нейтральному ('plainDropZone').

При падении draggable div становится дочерним по отношению к dropzone div.Теперь, когда другой draggable входит в dropzone, класс изменяется на 'noDrop', чтобы указать, что больше нет возможных падений.На dragleave класс снова возвращается к нейтральному ('plainDropZone')

Проблема: при перетаскивании из внешнего dropzone div во внутренний упавший div, внешний dropzone div не должен возвращаться к нейтральному,но все же есть класс 'noDrop'.

Насколько я выяснил, это работает не так, как задумано, потому что при переходе от внешнего к внутреннему div, dragleave срабатывает после dragenter.Этот поток хорошо визуализирует проблему: HTML 5 события перетаскивания: «dragleave» запускается после «dragenter»

Вот полная демонстрация: https://jsfiddle.net/e12uadgh/

Так что были способ присвоить внешнему dropzone div классу noDrop, когда у него есть удаленный внутренний div, и пользователь перетаскивает третий div из внешнего dropzone div во внутренний удаленный div?

Answer 1

Нашел способ добиться эффекта.При перетаскивании элемента из внешнего div-зоны dropzone во внутреннее div-зону dropzone, dragleave для внешнего div запускается после dragenter для внутреннего div, поэтому любые изменения в dragenter отменяются изменениями, сделанными в dragleave.

Таким образом, одним из решений является внесение изменений только в dragleave, если целью следующего события не является внутренний div.Поскольку этого нельзя сделать путем проверки event.target на dragleave, мы можем вместо этого использовать переключатель, который имеет значение true на dragenter на внутреннем div и который становится ложным на dragleave на внутреннем div.

Вот демоверсия: https://jsfiddle.net/rookie_sen/2Lp5qg39/5/