CODEWITHSUNDEEP
javascripthtmlcssiframedrag-and-drop
Glen Pierce
Glen Pierce

Reputation: 4841

How to prevent an iframe from stealing drop event from parent container?

I have a structure like this on my web page:

<div> I have dragenter, dragover, drop, and dragleave handlers
  <div> Lots of nice content
  <iframe src="somethingCoolFromSomeoneElse"></iframe>
</div>

Please see a demo of this here: https://codepen.io/glenpierce/pen/JLoJdJ?page=1&

My problem is that when a user goes to drag and drop something into the parent div, if they happen to be hovering over the iframe, the iframe steals the drop event.

How can I prevent iframes that are children of drop targets from stealing their parents' drop events?

I have tried:
1. covering the iframe with another div which has position:relative; height:100%; width:100%;.
2. bumping up the z-index of the parent.
3. Increasing the z-index of the div I was trying to conceal the iframe with.

I could try to hide the iframe when a drag event has started, but this would change the UI in a confusing fashion.

I do not use jquery.

Upvotes: 2

Views: 2474

Answers (1)

Mathew Berg
Mathew Berg

Reputation: 28750

You're going to have to disable mouse events on the iframe. You can stop them from happenning with pointer-events: none which is pretty supported: https://caniuse.com/#feat=pointer-events

I forked your demo to show you: https://codepen.io/anon/pen/dmPRqg?page=1&

I didn't wire up anything to actually toggle the mouse events, you can do that via a class or directly to the style or any other several ways.

Upvotes: 6

Related Questions