React-dnd: आईफ्रेम में बाहर खींचने का एक तरीका

को निर्मित 1 अग॰ 2019 · 6टिप्पणियाँ · स्रोत: react-dnd/react-dnd

क्या आपका फीचर अनुरोध किसी समस्या से संबंधित है?
प्रतिक्रिया एक HTML दस्तावेज़ के भीतर ड्रैग-एंड-ड्रॉप को सीमित करती है। किसी तरह हमें कुछ बाहर iframe अंदर खींचने की जरूरत है।

आप जो समाधान चाहते हैं उसका वर्णन करें
मुझे लगता है कि dnd HTML5backend बस विंडो में ड्रैग कॉलबैक ट्रिगर करता है। तो अगर हम आईफ्रेम के अंदर घटकों को कॉलबैक ट्रिगर कर सकते हैं। और React.createPortal आईफ्रेम के अंदर घटकों को बाहर के साथ एक ही डीएनडीप्रोवाइडर है। यह सौभाग्य से काम करता है। लेकिन मुझे चिंता है कि कुछ समस्या हो सकती है जिस पर मैंने ध्यान नहीं दिया। और कोड HTML5 बैकएंड के साथ इतना सुविधाजनक नहीं है।

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 7 अग॰ 2019

👍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 7 अग॰ 2019

👍8 ❤6 🎉4

@HsuTing यह आसान और बेहतर है। लेकिन अभी भी HTML5Backend इंटरफ़ेस के लिए बाध्य है। यदि HTML5Backend addEventListeners => addListeners को बदलता है, तो हमारा वेब टूट जाएगा

xiaoshuangLi 7 अग॰ 2019

वास्तव में अच्छा विचार, जब मैं हाइक से वापस आऊंगा तो मैं इसके साथ खेलूंगा

मंगलवार, अगस्त 6, 2019, रात 11:43 बजे [email protected] ने लिखा:

@HsuTing https://github.com/HsuTing यह आसान और बेहतर है। फिर भी
HTML5Backend इंटरफ़ेस के लिए बाध्य। यदि HTML5बैकएंड एडएवेंट लिस्टनर बदलता है
=> श्रोताओं को जोड़ें, हमारा वेब टूट जाएगा
-
आप इसे प्राप्त कर रहे हैं क्योंकि आपको असाइन किया गया था।
इस ईमेल का सीधे उत्तर दें, इसे GitHub पर देखें
कॉम
या थ्रेड को म्यूट करें
https://github.com/notifications/unsubscribe-auth/AAA3XCGHNHO3M3CSL5VRUQTQDJVJLANCNFSM4IIMWOQQ
.

darthtrevino 7 अग॰ 2019

👍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 16 फ़र॰ 2020

मुझे इस कोड को सरल बनाने के लिए एक आसान समाधान मिला, लेकिन मुझे यकीन नहीं है कि यह एक बेहतर समाधान है या नहीं। आशा है कि आप इस मुद्दे को ठीक करने में मदद करेंगे।
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'

क्या टीएस में इसे ठीक करने का कोई तरीका है?

shankyms 22 अग॰ 2020

addEventListeners बैकएंड इंटरफ़ेस पर उजागर नहीं होता है; और मैं इसका खुलासा नहीं करना चाहता क्योंकि यह डोम/ब्राउज़र विशिष्ट है। मुझे लगता है कि हमें जो करना चाहिए वह कुछ ऐसा है:

// 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 23 अग॰ 2020

क्या यह पृष्ठ उपयोगी था?

0 / 5 - 0 रेटिंग्स

React-dnd: आईफ्रेम में बाहर खींचने का एक तरीका

सबसे उपयोगी टिप्पणी

सभी 6 टिप्पणियाँ

संबंधित मुद्दों