HTML5 drop event child prevented

Question

I using HTML5 D&D. I have one "parent" drop area, e.g. "parent". In that parent I drop my childs, e.g. "child". Each dropped child become also dropped area, e.g. it could accept D&D events.

If I dragging something over "parent" area, it highlighted, same for the "child" areas. But I face issue, that "drop" event, fires from "parent" area. If I dragging something over a "child" area, "dragenter", "dragleave" work fine. But "drop" event doesn't fire. Instead, "parent" area fire it.

I resolve this issue with unbing in that moment "drop" event from "parent" area, but it's not a solution.

How I could fix it in normal way?

Answer 1

OK, I found that I have to use

event.stopPropagation();
event.preventDefault();

in "drop" event. Also ensure that it's binded not via jQuery live.