Potential bug with HTML drag/drop and event bubbling

1
votes

I noticed that when there's a div inside a div that's handling dragenter/leave events, dragging over the inner div causes the outer div to trigger dragleave. But this only happens when the outer div is position: fixed. Otherwise, dragging over the child/inner div properly bubbles up to its parent.

Example: https://jsfiddle.net/ffxsam/L2mvbo2t/

Drag a file over the output pane and you'll see the dropzone show up. If you continue to drag over the "Uh oh" text, the dropzone vanishes. Comment out the position: fixed line, then try again, and you'll see if you drag over "Uh oh," the dropzone remains.

Is this a bug? Actually, I just realized that in Firefox, the dragleave gets triggered as I move over the inner div, regardless of position. How can I work around this?

1
javascriptcsshtmldrag-and-drop

1 Answers

1
votes

I solved this by having three layers:

The full-width position: fixed backdrop div, which contains two divs:

  • One div with z-index: 1 that displays text such as "drop here to upload."
  • Another div with z-index: 2 that is full width/height position: absolute and sits on top of the previous div to watch for drag events.