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

[emaborsa]

I have already seen this and this post, but I think it is a dirty workaround. I defined a CustomDraggable component (see below), which can be used everywhere, the iframe can be i child and since I am working with other libraries such as @react-aria/dialog and @react-aria/overlays I have no control of the container and @simlmx solution does not work.

import Draggable from "react-draggable";
import styles from "./CustomDraggable.module.css";

export const CustomDraggable: FC = ({ children }) => {
  return (
    <Draggable cancel={"input, svg, button, table"}>
      <div className={styles.draggable}>{children}</div>
    </Draggable>
  );
};

[jwangyangls]

+1

[danopia]

Hi, I also encountered losing the drag when the mouse goes over an iframe. I found a relatively simple CSS-only workaround for my needs, perhaps it works for others too.

/* Prevent iframes from stealing drag events */
.react-draggable-transparent-selection iframe {
  pointer-events: none;
}

This depends on the body class set by Draggable, and stops events from going into any iframe during a drag. Note that this workaround blocks multi-input actions, such as initiating a touch-scrolling action within an iframe while actively dragging any element on the page.