react-draggable
react-draggable copied to clipboard
Draggable iframe outside iframe
Hello i have a problem. I have an iframe inside it has its own life (its own interface).
Since "bubbling events" stops at the top level inside the iframe, holding on to the iframe I can't drag it.
what can you advise me ?
<Draggable bounds="body">
<div className={styles.container}>
<div className={styles.videoCallContainer} ref={rootRef}>
{isIFrameLoaded && (
<iframe src...>
// etc
)}
</div>
</div>
</Draggable>
If at least one element is on top of an iframe then I can grab and drag it, but then it overlaps the interface inside the iframe itself.
I tried adding <div className={styles.draggableBox} /> on top of the iframe and giving this div the styles
pointer-events: none;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 6;
border: 1px dashed tomato;
But it doesn't help. The behavior is the same as without the div
dependencies: "react-draggable": "4.4.3", "react": "16.10.2", "react-dom": "16.10.2"
Thanks
there is no update on this issue?
+1