React-dnd: A way to drag outside to iframe

Created on 1 Aug 2019 · 6Comments · Source: react-dnd/react-dnd

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.

design decisions enhancement pinned

Source

xiaoshuangLi

👍1

Most helpful comment

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>
);

HsuTing on 7 Aug 2019

👍8 ❤6 🎉4

All 6 comments

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>
);

HsuTing on 7 Aug 2019

👍8 ❤6 🎉4

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

xiaoshuangLi on 7 Aug 2019

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

On Tue, Aug 6, 2019, 11:43 PM 晓爽 notifications@github.com 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
https://github.com/react-dnd/react-dnd/issues/1496?email_source=notifications&email_token=AAA3XCDZJS3V5E7YISDRUC3QDJVJLA5CNFSM4IIMWOQ2YY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOD3XL66Y#issuecomment-518963067,
or mute the thread
https://github.com/notifications/unsubscribe-auth/AAA3XCGHNHO3M3CSL5VRUQTQDJVJLANCNFSM4IIMWOQQ
.

darthtrevino on 7 Aug 2019

👍1

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.

humayunkabir on 16 Feb 2020

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 ?

shankyms on 22 Aug 2020

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;
};

darthtrevino on 23 Aug 2020

Was this page helpful?

0 / 5 - 0 ratings