React-dnd: 一种将外部拖到 iframe 的方法

创建于 2019-08-01 · 6评论 · 资料来源: react-dnd/react-dnd

您的功能请求是否与问题有关？
React 限制了在单个 HTML 文档中的拖放。不知何故，我们需要将一些东西拖到外面的 iframe 里面。

描述您想要的解决方案
我发现 dnd HTML5backend 只是在窗口中触发拖动回调。因此，如果我们可以让 iframe 内部的组件触发这些回调。并且React.createPortal使 iframe 内部的组件具有与外部相同的 DndProvider。幸运的是，它可以工作。但我担心可能会出现一些我没有注意到的问题。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>
  );
});

描述你考虑过的替代方案
可以使用 HTML5Backend 导出一些选项。

design decisions enhancement pinned

资料来源

xiaoshuangLi

👍1

最有用的评论

我找到了一个更简单的解决方案来简化此代码，但我不确定这是否是更好的解决方案。希望能帮助你解决这个问题。

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 于 2019-08-07

👍8 ❤6 🎉4

所有6条评论

我找到了一个更简单的解决方案来简化此代码，但我不确定这是否是更好的解决方案。希望能帮助你解决这个问题。

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 于 2019-08-07

👍8 ❤6 🎉4

@HsuTing它更容易，更好。但仍然绑定到 HTML5Backend 接口。如果 HTML5Backend 更改 addEventListeners => addListeners，我们的网络就会崩溃

xiaoshuangLi 于 2019-08-07

真的很酷的主意，当我徒步回来时我会玩它

2019 年 8 月 6 日，星期二，晚上 11:43 晓爽[email protected]写道：

@HsuTing https://github.com/HsuTing它更容易，更好。但还是
绑定到 HTML5Backend 接口。如果 HTML5Backend 更改 addEventListeners
=> addListeners，我们的网络会崩溃
—
你收到这个是因为你被分配了。
直接回复本邮件，在GitHub上查看
https://github.com/react-dnd/react-dnd/issues/1496?email_source=notifications&email_token=AAA3XCDZJS3V5E7YISDRUC3QDJVJLA5CNFSM4IIMWOQ2YY3PNVWWK3TUL52HS4DFVREXG43VMVBWZKLON6000000000000000000000000000000007
或静音线程
https://github.com/notifications/unsubscribe-auth/AAA3XCGHNHO3M3CSL5VRUQTQDJVJLANCNFSM4IIMWOQQ
.

darthtrevino 于 2019-08-07

👍1

我找到了一个更简单的解决方案来简化此代码，但我不确定这是否是更好的解决方案。希望能帮助你解决这个问题。

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

这是一个很好的方法，对我有用。

humayunkabir 于 2020-02-16

我找到了一个更简单的解决方案来简化此代码，但我不确定这是否是更好的解决方案。希望能帮助你解决这个问题。

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

尝试使用打字稿时，出现错误Property 'addEventListeners' does not exist on type 'Backend'

有没有办法在 TS 中解决这个问题？

shankyms 于 2020-08-22

addEventListeners 未在 Backend 接口上公开；我不想公开它，因为它是特定于 DOM/浏览器的。我认为我们应该做的可能是这样的：

// 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 于 2020-08-23

此页面是否有帮助？

0 / 5 - 0 等级

React-dnd: 一种将外部拖到 iframe 的方法

最有用的评论

所有6条评论

相关问题