React-dnd: 내부 및 / 또는 iframe과 함께 사용합니다.

상자 밖에서 프레임을 드래그 / 드롭하는 것도 나에게도 효과가 없었습니다. 드래그 / 드롭 이벤트를 각 추가 프레임의 창 개체에 적용하면되는 것 같습니다. 현재 반응 앱을 실행중인 창 개체 만 가져옵니다.

https://github.com/gaearon/react-dnd/blob/master/src/backends/HTML5.js#L130 -L139

최근 프로젝트에서 HTML5 백엔드를 원숭이 패치하여 작동하도록했습니다 ( setup 및 teardown 대체 win 창 개체 허용).

https://gist.github.com/rasmusfl0e/39db428399bd196ef706

또한 필요할 때 (프레임 설정시) setup 및 teardown 를 실행하려면 백엔드 인스턴스가 어떻게 든 노출되어야합니다 ( DragDropContext.js 에서 더 많은 monkey-patching ...). .

하지만 일단 완료되면 매력처럼 작동합니다 : D

오 와우 좋은 발견, 많은 의미가 있습니다. 오늘 나중에 시도해볼 예정인데 DragDropContext.js의 변경을 피할 수 있습니까? 그렇게하면 문서에서 언급 한 것처럼 새로운 백엔드를 만들 수 있습니다.

이를 해결하는 특정 API 및 구현 제안을 고려하게되어 기쁩니다.
불행히도 정확히 무엇이 바뀌었고 왜 바뀌 었는지 요점에서 소화하기가 어렵습니다.

지금은 iframe을 지원하지 않는다고 가정 해 보겠습니다.

@gaearon 드래그 앤 드롭 페이지 빌더를 구축하려고합니다. 다른 모든 것을 시도했지만 플럭스로 작업하는 것은 끔찍합니다. 크로스 프레임에서 작동하도록 조정해야 할 단서를 줄 수 있습니까?

@nadimtuhin 저는 문제를 제기했을 때 크로스 프레임 페이지 빌더를 직접 작업하고 있었으며 이번 주에 다중 창 솔루션을 다시 시작할 것입니다. React로 iframe을 관리하고 있습니까?

나에게는 iframe 내부에서 작업하는 것이 더 이상 최선의 솔루션인지 확실하지 않지만 확실히 좋을 것입니다. 그러나 여러 앱에서 작동하도록 react-dnd를 목표로하는 것이 더 나은 옵션 인 것 같습니다.

어제 간단히 살펴 보았고 html5 백엔드에 일부 핸들을 로깅했습니다. 첫 번째 윈도우의 소스는 두 번째 윈도우의 타겟에서 감지됩니다. 그러나 그것은 내가 얻은 한입니다.

@gaearon 내 첫 번째 실제 오픈 소스

@mattconde no 내 반응 앱 내에서 iframe을 관리하지 않습니다. 두 개의 다른 프레임에 두 개의 다른 앱을 사용할 계획입니다. 부모 창에는 데이터 조작을위한 논리와 프레젠테이션을위한 자식 프레임이 있습니다. 자식은 부모 플럭스 저장소에서 소품을 가져옵니다.

뿡뿡

"HTML5 백엔드에 로그를 넣은 다음 조정을 시작하십시오"외에 다른 지침을 제공하기가 어렵습니다. 가능한 가장 간단한 예를 들어서 제대로 작동하는지 확인하십시오. 백엔드는 창 이벤트 및 노드 이벤트를 구독하고이를 작업으로 변환하는 한 가지 작업 만 수행합니다. iframe의 작동 방식에 대해 충분히 모릅니다. 창을 구독하지 않고 특정 노드의 최상위 창 (또는 iframe)을 구독하도록 코드를 변경해야 할 수도 있습니다. 그러나 나는 여기서 내 깊이를 벗어 났으므로 쓰레기에 대해 이야기하고 있을지도 모른다.

트윗 담아 가기

최근에 같은 문제가 발생했습니다. 실패하는 이유는 HTML5Backend가 창에 이벤트 리스너를 설정하기 때문이지만 iframe 내에서 사용하려면 window.frames [0]과 같이 설정해야합니다.

@gaearon HTML5Backend.js의 설정 / 해체 기능에 컨텍스트를 전달하는 옵션에 대해 어떻게 생각하십니까?

iframe 내에서 작동하는 향상된 편집기 (텍스트, 이미지, ..)를 구축하여 동일한 문제를 겪고 있으며 그 안에 요소 (텍스트, img)를 드래그 앤 드롭해야합니다. 기본적으로 요소를 드래그 앤 드롭하여 주문.

https://github.com/gaearon/react-dnd/issues/435 문제를 열었고 iframe 때문이라는 것을 알았습니다. 나는 "조정"을 시도 할 것입니다. 그러나 어떤 해결 방법이 있다면 기뻐할 것입니다! :)

iframe에서 작동하도록 PR을 만들려고합니다. 현재 진행 중이지만 아직 작동하지 않습니다. setup 및 teardown 을 각각 componentDidMount 및 componentWillUnmount 에서 호출하는 방법을 파악하는 데 문제가 있습니다

https://github.com/gaearon/react-dnd-html5-backend/pull/27

@Vadorequest 우리 둘 다 유사한 최종 제품을 목표로하는 것 같습니다. 나는 부모에서 자식 창으로 react-dnd 와 함께 작동하도록 끝내지 않았습니다. 제가 해결 한 해결 방법은 에디터 (부모) 앱과 미리보기 (자식) 앱이었습니다. 미리보기 앱은 편집기 redux 스토어에 연결할 수있을 때까지 렌더링되지 않았습니다.

그런 다음 redux 스토어에 사용자가 편집기에서 멋진 콘텐츠 페이지로 드래그 할 수있는 템플릿 목록이 있습니다. 그래서 내 템플릿 목록은 편집기 창에 있었지만 미리보기로 드래그하고 싶습니다.

네이티브 유형을 지원하는 react-dnd 덕분에 에디터 창에서 텍스트 드래그를 설정하여 렌더링 할 각 템플릿에 필요한 정보를 전달할 수있었습니다. 내 코드 스 니펫 ...

    componentDidMount() {
        this.refs.template.addEventListener('dragstart', this.handleDragStart, false);
    },
    componentWillUnmount() {
        this.refs.template.removeEventListener('dragstart', this.handleDragStart, false);
    },
    handleDragStart(e) {
        const { template } = this.props;
        e.dataTransfer.setData('text/plain', JSON.stringify({
            type: template.type,
            name: template.name,
        }));
        return e;
    },

그런 다음 react-dnd 다른 쪽 끝에서 JSON 문자열을 잡을 수 있으며 정말 잘 작동합니다.

어떻게 타는 지 알려주세요. 다른 방법에 대해 듣고 싶어요.

@mattconde 나는 두 개의 개별 분기, 추악한 수정과 이에 대한 실제 수정에서 작업하고 있습니다. 추악한 수정은 단순히 HTML5Backend.js 파일의 해당 줄을 변경합니다. 변경 사항은 https://github.com/Gutenberg-Technology/react-dnd-html5-backend/commit/8b3d6a44b2cdbfe8d5bac025fc263715968d8b6c에서 볼 수 있습니다.

_ (기본적으로 target 매개 변수를 setup 및 teardown 추가합니다.이 매개 변수는 내 iframe을 기본값으로 사용하고 window 합니다. iframe이 발견되지 않으면 실제로 실패 할 정도로 추악하지만 지금은 할 것입니다.) _

그러나 iframe이 두 개 이상인 경우 일부 상황에서는 실패 할 가능성이 있으므로 막히는 것을 피하는 것입니다. 더 나은 해결책은 target 매개 변수를 전달하여 리스너를 바인딩 및 바인딩 해제하여 내 코드 내에서 setup 및 teardown 를 수동으로 호출하는 것입니다.

해결책을 설명해 주셔서 감사합니다. 가까운 장래에 더 나은 해결 방법을 찾으면 PR을 확실히 개선하겠습니다. :)

안녕하세요, 방금이 문제가 발생하여 창을 iframe과 연결하는 방법을 알 수 없습니다. 예를 들어 창에 DragSource를 추가하고 iframe에 DropTarget을 만들고 싶습니다. HTML5Backend를 조정해도 그렇게 작동하지 않습니다.

@mattconde 공유해 주셔서 감사합니다. 나는 비슷한 최종 제품을 만들고 있다고 생각합니다. 더 나쁜 것은 Angular 2를 사용하고 있다는 것입니다. 부분적으로 React-dnd를 Angular로 이식했지만 마지막으로 iframe으로 벽에 부딪 혔습니다. 당신의 방법을 시도 할 것입니다.

@gaearon 여기의 PR ☝️은 iframe을 지원하기 위해 react-dnd를 허용합니다. 우려 사항이 있거나 변경이 필요한 경우 알려주십시오.

@kesne 당신은 새로운 관리자입니까? 이 PR을 검토 할 수 있습니까?

안녕하세요 @darthtrevino
변경 사항으로 페이지에서 프레임으로 요소를 드래그 할 수 있습니까?
프레임 안팎으로 드래그 앤 드롭 할 수 있습니다.

안녕하세요 @crysislinux , 저는이 라이브러리를 Angular 2로 포팅하려고합니다. 여러분이 무엇을

예를 들어 iframe 내부의 iframe 외부에있는 항목을 드롭하는 방법이 있습니까?

<DragDropContextProvider backend={HTML5Backend}>
    <div>
        <Item />
        <Frame>
            <div>
                <Dustbin />
            </div>
        </Frame>
    </div>
</DragDropContextProvider>

많은 시도 끝에 다음과 같이 iframe 내부에 요소를 놓을 수있었습니다.

import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import PropTypes from 'prop-types';
import FrameComponent from 'react-frame-component';

class DragDropAwareIFrame extends Component {
  static propTypes = {
    innerRef: PropTypes.func,
  };

  static contextTypes = {
    dragDropManager: PropTypes.object.isRequired,
  }

  constructor(props, context) {
    super(props, context);

    this.manager = this.context.dragDropManager;
  }

  componentDidMount() {
    const iframe = ReactDOM.findDOMNode(this.iframe);
    this.manager.getBackend().addEventListeners(iframe.contentWindow);
  }

  componentWillUnmount() {
    const iframe = ReactDOM.findDOMNode(this.iframe);
    this.manager.getBackend().removeEventListeners(iframe.contentWindow);
  }

  handleRef = (el) => {
    this.iframe = el;
    if (this.props.innerRef) this.props.innerRef(el);
  }

  render() {
    const { innerRef, ...props } = this.props;
    return <FrameComponent {...props} ref={this.handleRef} />;
  }
}

<DragDropContextProvider backend={HTML5Backend}>
    <div>
        <Item />
        <DragDropAwareIFrame>
            <div>
                <Dustbin />
            </div>
        </DragDropAwareIFrame>
    </div>
</DragDropContextProvider>

이것이 올바른 방법 인 것 같습니까?

@ethanve 속임수 문제에서이 스레드를 우연히 발견했습니다. 설명하신대로 작성했습니다. https://cormacrelf.github.io/angular-skyhook/

또한 iframe 내에서 dnd를 사용하는 데 문제가 있습니다 (부모 상호 작용 없음). 드래그는 잘 작동하지만 드롭 존은 더 이상 작동하지 않습니다. 드롭 존이 iframe 내에서 작동하도록하는 솔루션은 무엇입니까 (항목을 iframe 내에서 완전히 이동).

Touch 백엔드에서는 작동하지만 HTML5 백엔드에서는 작동하지 않는다는 점을 지적하고 싶습니다.