A way to drag outside to iframe

[xiaoshuangLi]

Is your feature request related to a problem? Please describe.
React limits that drag-and-drop within a single HTML document. Somehow we need drag something outside to iframe inside.

Describe the solution you'd like
I find that dnd HTML5backend just trigger drag callbacks in window. So if we can make the components inside iframe trigger those callback.And React.createPortal make components inside iframe have same DndProvider with outside.It works, luckily. But i worry about may some problem i didn't notice.And the code is not so convenient with HTML5Backend.

import React, {
  useRef,
  useEffect,
  useContext,
  forwardRef,
} from 'react';
import classnames from 'classnames';
import { DndContext } from 'react-dnd';

// Frame base on createPortal inside iframe dom.
import Frame from 'react-frame-component';

const events = [
  ['dragstart', 'handleTopDragStart', false],
  ['dragstart', 'handleTopDragStartCapture', true],
  ['dragend', 'handleTopDragEndCapture', true],
  ['dragenter', 'handleTopDragEnter', false],
  ['dragenter', 'handleTopDragEnterCapture', true],
  ['dragleave', 'handleTopDragLeaveCapture', true],
  ['dragover', 'handleTopDragOver', false],
  ['dragover', 'handleTopDragOverCapture', true],
  ['drop', 'handleTopDrop', false],
  ['drop', 'handleTopDropCapture', true],
];

export const DndFrame = forwardRef((props = {}, ref) => {
  const container = useRef(null);
  const dndValue = useContext(DndContext) || {};

  const { dragDropManager: { backend = {} } = {} } = dndValue;
  const { children, className, containerProps = {}, ...others } = props;

  const cls = classnames({
    'dnd-frame': true,
    [className]: !!className,
  });

  useEffect(() => {
    const { current } = container;

    if (!current) {
      return;
    }

    // this make callback run in outside window
    events.forEach((eventArgs = []) => {
      const [name, callbackName, capture = false] = eventArgs;

      const callback = backend[callbackName] && backend[callbackName].bind(backend);

      current.addEventListener(name, (...args) => {
        callback && callback(...args);
      }, capture);
    });
  }, [container.current]);

  return (
    <Frame className={cls} ref={ref} {...others}>
      <div className="dnd-frame-container" ref={container} {...containerProps}>
        { children }
      </div>
    </Frame>
  );
});

Describe alternatives you've considered
May you can export some options with HTML5Backend.

[HsuTing]

I found an easier solution to simplify this code, but I am not sure if this one is a better solution. Hope to help you to fix this issue.

import React, { useContext, useEffect } from 'react';
import DndProvider, { DndContext } from 'react-dnd';
import HTML5Backend from 'react-dnd-html5-backend';
import Frame, { FrameContext } from 'react-frame-component';

const DndFrame = ({ children }) => {
  const { dragDropManager } = useContext(DndContext);
  const { window } = useContext(FrameContext);

  useEffect(() => {
    dragDropManager.getBackend().addEventListeners(window);
  });

  return children;
};

const Example = () => (
  <DndProvider backend={HTML5Backend}>
    <Frame>
       <DndFrame>
          <div>...</div>
       </DndFrame>
    </Frame>
  </DndProvider>
);

[xiaoshuangLi]

@HsuTing It's easier and better. But still bound to HTML5Backend interface. If HTML5Backend changes addEventListeners => addListeners, our web would be broke down

[darthtrevino]

Really cool idea, I'll play around with it when I get back from the hike

…

On Tue, Aug 6, 2019, 11:43 PM 晓爽 ***@***.***> wrote: @HsuTing <https://github.com/HsuTing> It's easier and better. But still bound to HTML5Backend interface. If HTML5Backend changes addEventListeners => addListeners, our web would be broke down — You are receiving this because you were assigned. Reply to this email directly, view it on GitHub <#1496?email_source=notifications&email_token=AAA3XCDZJS3V5E7YISDRUC3QDJVJLA5CNFSM4IIMWOQ2YY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOD3XL66Y#issuecomment-518963067>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AAA3XCGHNHO3M3CSL5VRUQTQDJVJLANCNFSM4IIMWOQQ> .

[humayunkabir]

I found an easier solution to simplify this code, but I am not sure if this one is a better solution. Hope to help you to fix this issue.

import React, { useContext, useEffect } from 'react';
import DndProvider, { DndContext } from 'react-dnd';
import HTML5Backend from 'react-dnd-html5-backend';
import Frame, { FrameContext } from 'react-frame-component';

const DndFrame = ({ children }) => {
  const { dragDropManager } = useContext(DndContext);
  const { window } = useContext(FrameContext);

  useEffect(() => {
    dragDropManager.getBackend().addEventListeners(window);
  });

  return children;
};

const Example = () => (
  <DndProvider backend={HTML5Backend}>
    <Frame>
       <DndFrame>
          <div>...</div>
       </DndFrame>
    </Frame>
  </DndProvider>
);

It's a great approach and works for me.

[shankyms]

I found an easier solution to simplify this code, but I am not sure if this one is a better solution. Hope to help you to fix this issue.

import React, { useContext, useEffect } from 'react';
import DndProvider, { DndContext } from 'react-dnd';
import HTML5Backend from 'react-dnd-html5-backend';
import Frame, { FrameContext } from 'react-frame-component';

const DndFrame = ({ children }) => {
  const { dragDropManager } = useContext(DndContext);
  const { window } = useContext(FrameContext);

  useEffect(() => {
    dragDropManager.getBackend().addEventListeners(window);
  });

  return children;
};

const Example = () => (
  <DndProvider backend={HTML5Backend}>
    <Frame>
       <DndFrame>
          <div>...</div>
       </DndFrame>
    </Frame>
  </DndProvider>
);

When trying with typescript I get an error Property 'addEventListeners' does not exist on type 'Backend'

is there any way to fix this in TS ?

[darthtrevino]

addEventListeners isn't exposed on the Backend interface; and I don't want to expose it because it's DOM/Browser specific. I think what we should probably do is something like:

// detect if SSR mode
const DEFAULT_GLOBAL_CONTEXT = typeof window !== 'undefined' ? window : global

const DndFrame = ({ children, globalContext = DEFAULT_GLOBAL_CONTEXT}) => {
  const { dragDropManager } = useContext(DndContext);
  const { window } = useContext(FrameContext);
  const backend = useMemo(() => dragDropManager.getBackend(), [dragDropManager])

  useEffect(() => {
     // This will required adding an initialize() method to the Backend interface.
    // Backend constructors will have to thunk over to it. It could replace constructors, but that would be semver major.
    backend.initialize(dragDropManager, globalContext)
    backend.setup()
  }, [globalContext]);

  return children;
};

[xiaoshuangLi]

Create a repo for this. And resolve the style problem.

react-mc-dnd-frame

[drmzio]

I found an easier solution to simplify this code, but I am not sure if this one is a better solution. Hope to help you to fix this issue.

import React, { useContext, useEffect } from 'react';
import DndProvider, { DndContext } from 'react-dnd';
import HTML5Backend from 'react-dnd-html5-backend';
import Frame, { FrameContext } from 'react-frame-component';

const DndFrame = ({ children }) => {
  const { dragDropManager } = useContext(DndContext);
  const { window } = useContext(FrameContext);

  useEffect(() => {
    dragDropManager.getBackend().addEventListeners(window);
  });

  return children;
};

const Example = () => (
  <DndProvider backend={HTML5Backend}>
    <Frame>
       <DndFrame>
          <div>...</div>
       </DndFrame>
    </Frame>
  </DndProvider>
);

When trying with typescript I get an error Property 'addEventListeners' does not exist on type 'Backend'

is there any way to fix this in TS ?

In case anyone comes across this, I just added the //@ts-ignore above the addEventListeners line and it worked for me.

[monkeyphysics]

For future visitors, there's a simple solution: https://react-dnd.github.io/react-dnd/examples/dustbin/iframe

[armedi]

For future visitors, there's a simple solution: https://react-dnd.github.io/react-dnd/examples/dustbin/iframe

This solution doesn't work for me. The example shows dragging item within the iframe, not from outside to inside iframe.

I tried this solution from @HsuTing and it still works.