React-dnd: React DnD가 Chrome 59에서 작동하지 않음

그렇지 않습니다. 그것은 완벽하게 잘 작동합니다. 확장 프로그램 없이 Chrome을 실행해 보세요.

@theTechie Windows의 Mac에서 확인하셨습니까? Mac에서는 정상적으로 작동합니다.

나는 맥에서 확인했다. 특정 플랫폼의 문제인가요?

@theTechie 어떤 이유로 반응 dnd는 정상적으로 'dragend'를 트리거하지 않습니다. 몇 대의 컴퓨터에서 테스트했는데 한 Mac에는 동일한 문제가 있고 모든 Windows에는 이 문제가 있습니다. 어떤 생각?

Chrome의 Windows 8.1/Windows 7과 IE 10 및 IE 11에서 여러 플랫폼에서 테스트했습니다. 잘 작동합니다.

@hunterbmt - 콘솔에 오류가 표시됩니까? 상황에 맞는 GIF를 공유할 수 있습니까?

@theTechie 반응 dnd의 예제 사이트에서 테스트했지만 문제가 없었습니다. 그러나 우리 애플리케이션에서 Chrome 59는 Chrome 58, FF, Safari 및 IE에서도 완벽하게 정상적으로 작동하는 일부 시나리오에서 'dragend'를 트리거하지 않았습니다.
브라우저가 잠시 후 트리거하지 않으면 '드롭' 후 'dragend'를 수동으로 트리거하여 수정했습니다.
다른 사람들도 이 문제에 실패하는지 모르겠습니다. 그렇다면 수정 사항을 react-dnd로 옮길 수 있습니다.

Chrome 59의 변경 로그를 살펴보았지만 아무 것도 찾지 못했습니다. 통찰력이 있으면 입력해 주시면 감사하겠습니다.

@hunterbmt 귀하의 코드에 고유한 것일 수 있다고 생각합니다. 심지어 여러 인스턴스에서 react-dnd를 사용했는데 모두 Chrome 59에서 제대로 작동합니다.

불행히도 왜 이런 일이 발생하는지 말할 수 없습니다. 어쩌면 여기에서 코드를 공유해도 괜찮다면 무언가를 찾으려고 노력할 수 있습니다.

Windows의 Chrome 59.0.3071.86에서도 동일한 문제가 있습니다. Firefox에서는 제대로 작동하고 이전 Chrome 버전에서는 제대로 작동했습니다. 패키지.json:

{
  "dependencies": {
    "react-dnd": "2.1.4",
    "react-dnd-html5-backend": "2.1.2",
  }
}

결과는 2.4.0/2.4.1과 동일합니다.

이 해킹으로 해결됨:

const ModifiedBackend = (...args) => {
    const instance = new HTML5Backend(...args);

    // Fix Chrome 59 not sending a DragEnd after Drop, which other browsers do and react-dnd expects
    const originalTopDrop = instance.handleTopDrop;
    const originalTopDragEndCapture = instance.handleTopDragEndCapture;
    let dragEndTimeout;
    instance.handleTopDrop = (e, ...args) => {
        dragEndTimeout = setTimeout(() => {
            originalTopDragEndCapture(e, ...args);
        }, 0);
        originalTopDrop(e, ...args);
    };
    instance.handleTopDragEndCapture = (e, ...args) => {
        clearTimeout(dragEndTimeout);
        originalTopDragEndCapture(e, ...args);
    };

    return instance;
};

// Decorate root elements with this
export default DragDropContext(ModifiedBackend);

@awestroke 나는 꽤 비슷한 해킹으로 끝나지만 놓을 수 없는 영역에서 빠르게 드래그 앤 드롭할 때 문제가 계속 발생합니다. Chrome은 'dragend'를 트리거하지 않으며 물론 'drop'도 트리거하지 않습니다. 옆에서 확인해 주시겠습니까?

@hunterbmt 떨어뜨릴 수 없는 지역에 떨어뜨리는 데 문제가 없습니다. 어떤 이벤트가 발생하는지 확인하지 않았지만 react-dnd가 손상된 상태로 들어가지 않아 모든 것이 잘 작동하는 것 같습니다.

endDrag를 트리거하는 조건을 단순화하여 이 문제와 잠재적 문제를 해결하기 위해 PR을 만들었습니다.
https://github.com/react-dnd/react-dnd/pull/801

매번은 아니지만 어떤 경우에는 같은 문제가 있습니다. 예를 들어 그 경우는 다음과 같습니다.
드롭 영역 안에 놓을 수 있는 위젯이 있으며 위젯을 놓을 때 해당 드롭 영역이 일부 html을 렌더링합니다. 비디오 위젯을 놓기로 선택하면 iframe 가 렌더링되고 깨지고 그 후에 다른 위젯을 끌 수 없습니다( dragend 이벤트가 발생하지 않음). 그러나 iframe 를 일부 텍스트 또는 이미지로 바꾸면 완벽하게 작동하며 Chrome 59 이전에는 작동하고 다른 브라우저에서도 작동했지만 알아낼 수 없습니다. Chrome 또는 react-dnd?

@rogyvoje Chrome이 'dragend'에 대한 이벤트 트리거에서 무언가를 변경했다고 생각합니다. 더 많은 정보를 검색하려고했지만 어디에도 언급하지 않습니다.
Btw, 'dragstart' 이후의 'mousemove'에 따라 대부분의 경우 'dragend'에 의존하고 어떤 경우에는 'mousemove'(DOM에서 요소를 드래그)에 의존하는 것이 내 PR로 더 합리적이고 간단합니다.

@hunterbmt 이해해주셔서 감사합니다 😄
하지만 npm/yarn을 통해 pull 요청을 어떻게 사용할 수 있습니까? 병합되지 않은 것 같아서, 아니면 내가 잘못? 😕

@rogyvoje 버전 대신 내 지점을 직접 가리킬 수 있다고 생각합니다. PR은 병합되었지만 react-dnd는 아직 새 버전이 출시되지 않았으므로 react-dnd npm/yarn에서 직접 가져올 수 없습니다.

@hunterbmt
나는 이것을 다음과 같이 시도했다.

npm install git+https://github.com/react-dnd/react-dnd.git#41eb8caa0bc106c9edf0d3ca628b49e70525090b

하지만 로그인 화면은 항상 팝업됩니다 😕

이 스레드의 누군가가 문제의 재현 가능한 사례를 제공할 수 있습니까? 나는 react-dnd 를 많이 사용하고 있지만 Chrome 59에서 어떤 문제도 식별할 수 없으므로 Chrome 59가 drag/drop 하지 않기 때문에 react-dnd 가 실패하는 재현 가능한 사례에 매우 관심이 있습니다 drag/drop 이벤트가 올바르게 표시됩니다.

문제가 있는 경우 처음에 문제를 본 일부 사용자가 매우 쉽게 재현할 수 있어야 한다고 생각합니다. 따라서 시간을 내어 재현 가능한 사례를 게시해 보세요(github repo 또는 여기에 게시된 코드가 될 수 있음). https://codesandbox.io/) 및 의미 있는 정보(예: OS, react-dnd 버전 등)를 제공하려고 합니다. 고마워!

@bjrmatos 여기, 내가 하나 만들었습니다. 이것은 내 경우이며 도움이 되기를 바랍니다!

https://github.com/rogyvoje/react-dnd-chrome-59

크롬 59 및 현재 업데이트에서 테스트했습니다.
버전 60.0.3112.78(공식 빌드)(64비트)

Windows 정보:
OS 이름: 마이크로소프트 윈도우 10 프로
OS 버전: 10.0.14393 해당 없음 빌드 14393

Chrome: 버전 55.0.2883.87(64비트)(Linux/Mint 18)에서 테스트되었으며 완벽하게 작동합니다...

@rogyvoje 감사합니다! 나중에 살펴보겠습니다. 내 Windows 7 VM에서 문제를 볼 수 있는지 확인하겠습니다. 그렇지 않으면 Windows 10에서 다른 VM을 사용해 보겠습니다. 감사합니다!

안녕 @rogyvoje 나는 당신이 거기에 같은 문제가 있다고 말했듯이 최신 크롬 릴리스에서 직접 저장소를 시도했습니다(버전 60.0.3112.78(공식 빌드)(64비트)-Windows 10 PRO). 그러나 나는 보이지 않습니다 모든 오류.

예상한 결과죠?

문제를 재현하기 위한 다른 단계가 있습니까/더 있습니까?

[email protected] ( yarn 를 사용하는 대신)를 사용하여 종속성을 설치했으며 여기에 기록을 위해 설치된 종속성의 정확한 버전이 있습니다.

참고: 저는 Windows 10 PRO VM을 사용하고 있습니다(내 주요 OS는 크롬 문제가 없는 OSX El Capitan이기 때문에)

내 모든 크롬 확장 프로그램이 비활성화된 동일한 결과:

@rogyvoje 방금 귀하의 과거 의견을 읽었으며 이제 첫 번째 드래그가 작동한다고 말했듯이 문제를 재현할 수 있지만 누군가가 두 번째 드래그를 시도하면 Cannot call hover after drop 오류가 나타납니다.

리포지토리에 감사드립니다. 문제를 자세히 살펴보고 모두를 행복하게 만드는 솔루션을 찾도록 노력하겠습니다.

버그가 확인된 것 같습니다: https://bugs.chromium.org/p/chromium/issues/detail?id=737691&q=dragend&colspec=ID%20Pri%20M%20Stars%20ReleaseBlock%20Component%20Status%20Owner%20Summary%20OS %20수정됨

https://stackoverflow.com/questions/44764343/dragend-event-not-firing-in-chrome-when-an-iframe-is-moved-in-drop-function

기록을 위해 Chrome(60) Mac OS(El Capitan)에서도 동일한 예제로 오류를 재현할 수 있으므로(Mac용 Chrome 59에도 있는지 확실하지 않음) Chrome을 사용할 때 모든 곳에서 실패합니다(> =59) iframe을 사용할 때 😂

@bjrmatos 훌륭합니다. 성공적으로 재현해 주셔서 기쁩니다 😄
다음에 무슨 일이 일어날지 잘 모르겠지만 Chrome 61을 기다려야 하나요? 😂

다음에 무슨 일이 일어날지 잘 모르겠지만 Chrome 61을 기다려야 하나요?

아마도 어쨌든 Chrome 59, 60에서 react-dnd가 작동하도록 하는 멋진 패치를 찾으려고 노력하고 있으므로 나중에 여기에 더 많은 업데이트를 게시하겠습니다 👍

이것이 문제를 해결한다고 생각합니다. https://github.com/react-dnd/react-dnd/pull/820
이미 병합되었지만 릴리스되지 않았습니다.

이 문제에 대한 소식이 있습니까?
최신 크롬에서 계속 문제가 발생합니다...

@ms88privat #820은 예외를 해결하지만 Chrome(67을 사용하고 있음)에서 iframe이 렌더링될 때 source.endDrag 가 호출되지 않는 초기 문제는 해결하지 못했습니다.

3.0 이전에는 @0rvar 에서 제공하는 해결 방법을 사용했지만 더 엄격한 TS 유형을 사용하면 인스턴스 메서드나 개인 클래스 메서드를 재정의할 수 없습니다.

@rogyvoje의 테스트 리포지토리에서 Video.js 에 endDrag를 추가하여 재현할 수 있습니다.

const source = {
    beginDrag(props) {
        return {
            renderVideo: true
        };
    },
    // Add end drag
    endDrag(props, monitor) {
        if (!monitor) return;
        // Only gets called when the iframe is already rendered
        console.log("endDrag");
    }
};

처음 드래그하면 Chrome에서 endDrag 가 호출되지 않습니다.

chrome 내부 페이지의 iframe에 포함할 때도 멈춥니다(현재까지 59) @0rvar 의 수정 사항은 이 경우에도 작동합니다.

이것은 어제 출시된 크롬 72에서 수정되었습니다.

이 문제는 최근 활동이 없었기 때문에 자동으로 오래된 것으로 표시되었습니다. 더 이상 활동이 없으면 폐쇄됩니다. 귀하의 기여에 감사드립니다.