Drag n' Drop: How to make drop fall through to parent?

JavaScript
1

TL:DR: I need help making sure a parent element is the target of a drop event, not its children.

Background: I am trying to create a project stimulated by discussion on this forum about object-oriented Javascript. It is to be a single-page app in React. I have been bashing my head against drag-and-drop functionality, and making quite a dent. Unfortunately, I’ve hit some harder stone, and I can’t figure out why drag-and-drop functionality doesn’t bubble up to the level in the DOM tree where I’ve implemented my onDragOver and onDrop handlers. I experimented a little to see whether this was a React issue or a Javascript issue. It appears to be a Javascript Issue, as you can see in this pen here:
Note: I strongly recommend docking the editor panes to the left (bottom left icon under the “change view” button).

Expected behavior:
I’d expect the drop events to “fall through” to the highest level of the DOM tree that implements the drop handlers (parent level).

Actual behavior:
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.

2

So what do you want to do with it? Because any time the handler is called you know the element has been dropped onto the parent element. evt just gives you more specific information in case it has been dropped onto the child element.

1 Like
3

As a result of writing this post/project, and assuring myself the issue was Javascript, not React, I reformulated the search question. Googling “javascript make drop fall through to parent” yielded the answer on StackOverflow:

By accepting that I wasn’t going to be able to make the drop event target the parent, I was able to follow StackOverflow user imtheman’ s advice, and pass the calling element as a second parameter to the dropHandler, so there is always a reference to it.

Forked (working) version:

4

Hi Ben, I was writing that I’d solved it by refining my question when you responded. The forked version of the pen shows what I wanted: drop on the most nested element (blue), and send the information to the element that implements the handler (red). Solved by passing a reference to the implementing element into the handler.

1 Like
5

Perhaps you could use event.currentTarget instead of event.target. See MDN Web docs.