TL:DR: I need help making sure a parent element is the target of a drop event, not its children.
Note: I strongly recommend docking the editor panes to the left (bottom left icon under the “change view” button).
I’d expect the drop events to “fall through” to the highest level of the DOM tree that implements the drop handlers (parent level).
As you’ll see in the pen, the child (blue) div can receive drop events even though the handlers for those drop events are implemented on the parent (red) div. The grandparent(green) div behaves as expected, receiving no drop events.
Whenever you drop the “Drag Me” (gray) span onto the parent or child divs, a new <p> element is appended to it indicating that a drop event occurred, and what the id of the drop target was. Once you’ve done this, those programmatically-generated <p> nodes are displayed, and can receive the drop, as they are descendants of the parent level.
If you look at the console, you’ll see each of these drag-n-drop events should
bubble and are
cancelable. I haven’t found a good answer despite googling, or I wouldn’t have gone through the bother of running this vanilla JS experiment as a supplement to my question.