Dragging over an iframe stops dragging when moving the mouse too fast

[simlmx]

I found a solution which I'm sharing here.

I had something that looked like

...
return (
  <>
    <iframe></iframe>
    <Draggable>
      <div style={{position: 'absolute'}}></div>
    </Draggable>
  </>
)

i.e. a draggable <div> on top of an <iframe>. When dragging too fast I would lose the drag.

My solution (inspired from this other post) was this:

...
const [isDragging, setIsDragging] = useState(false);

return (
  <>
    {isDragging && (
      <div style={{position: 'absolute', left: 0, right: 0, bottom: 0, top: 0, zIndex: 9999}}</div>
    )}
    <iframe></iframe>
    <Draggable
      onStart={() => setIsDragging(true)}
      onStop={() => setIsDragging(false)}
    >
      <div style={{position: 'absolute'}}></div>
    </Draggable>
  </>
)

This makes sure that when we are dragging, we are dragging on top of a big <div> instead of the <iframe>.

EDIT See @landish's solution below for something even simpler.

[liorocks]

Amazing solution 👍

I had the same problem, thanks for sharing, it really helped!

I noticed that react-draggable library adds .react-draggable-transparent-selection class to body tag while an element is being dragged.

So here is an alternative solution, which is more like CSS approach and does not requires managing isDragging state.

.react-draggable-transparent-selection .draggable-iframe-cover {
    display: block;
    z-index: 999999;
}

.draggable-iframe-cover {
    position: absolute;
    display: none;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}

<div style={{ position: 'relative' }}>
    <div className="draggable-iframe-cover" />
    <iframe ... />
</div>

[simlmx]

@landish Nice! I switched to your simpler and cleaner solution! 👌