Drag from outside to inside an Iframe

There seems to be a lot of talk about Iframe support and you can setup DragDropContextProvider from within an Iframe, however, it doesn’t seem possible to drag from outside to inside of an iframe.

<DragDropContextProvider backend={HTML5Backend}>
  <div>
    <Frame style={{ heigth: '400px', width: '100%' }}>
      <div style={{ clear: 'both' }}>
        <Dustbin />
      </div>
    </Frame>
    <div style={{ overflow: 'hidden', clear: 'both' }}>
      <Box name="Glass" />
      <Box name="Banana" />
      <Box name="Paper" />
    </div>
  </div>
</DragDropContextProvider>

[paztis]

I’ve just found one way oy do it but I access private properties of HTML5Backend for this:

import {useDragDropManager} from 'react-dnd';
import Frame, {FrameContextConsumer} from 'react-frame-component';

...

const dragDropManager = useDragDropManager();

return (
  <Frame>
    <FrameContextConsumer>
      {
        // Callback is invoked with iframe's window and document instances
        ({document, window}) => {
          const backend = dragDropManager.getBackend();
          (backend as any).addEventListeners(window); // => add listeners on the chind iframe
        }
      }
     </FrameContextConsumer>
     <all the frame display I need />
  </Frame>
);

But to be able to do this, I need to be able to access addEventListeners / removeEventListeners method of the backend, that are not public at all.

Is is possible to make them public ?

[nbwar]

Made a quick Backend to support cross iframe support. May not be the best solution but gets the job done for now. Main change is how HTML5Backend references this.window. Changed it to this.windows that stores all iframe windows within the parent window.

https://github.com/nbwar/react-dnd-multi-iframe-backend