나는 반대의 문제가 있었다. HTML5 백엔드가 dropzone에서 작동하도록하려면 다음을 수행해야합니다.

beginDrag(props) {
  Dropzone.instances[0].disable() 

과

endDrag(props, monitor, component) {
  Dropzone.instances[0].enable()

내 드롭 존은 본체에 장착되어 있으며 장착 순서대로 플레이 할 수 있습니다.
나는 그것을 몸 전체로 만들고 파일을 놓은 위치에 따라 조치를 취하는 것이 다른 방법이 작동하지 않는다면 당신을 위해 갈 방법이 될 수 있다고 생각합니다.

또한 드래그 가능한 항목에 <input> 이 있고 사용자가 항목을 선택 / 드래그하면 항목을 드래그하는 문제가 발생했습니다. 입력에 초점이 맞춰져 있으면 canDrag 에서 false 를 반환 할 수 있습니다.

HTML 드래그 / 드롭 업로드 방해를 해결하는 방법을 잘 모르겠습니다. 전체 레이아웃에서 이미 활성화했습니다. @gaearon , 생각?

@ffxsam 이것이 여전히 문제입니까?

모르겠어요. 이 문제로 인해 제거해야했기 때문에 여전히 문제인지 알 수 없습니다. 죄송합니다! 원하는 경우이 문제를 닫을 수 있습니다.

안녕하세요, 저는 같은 문제를 마주 쳤습니다. 문제를 열려고했지만 이미 열려있는 것 같습니다.
따라서 ReactDnD를 인스턴스화 할 때마다 네이티브 onDrop 이벤트가 작동하지 않습니다.
나는 동일한 사용 사례를 가지고 있으며, 전체 본문은 항상 드래그되는 파일을 수신하는 'dropzone'입니다. 매우 간단한 기능이며 상자에서 나오기 때문에 해당 구성 요소에 대한 기본 이벤트를 사용하고 있습니다. 하지만 뷰에서 ReactDnD가 작동하고 드롭 이벤트가 발생하지 않으며 onDragEnter 또는 onDragStart 이벤트를 덮어 쓰지 않기 때문에 재미 있습니다.
@kesne @gaearon 어떤 단서? ReactDnD를 제거하고 싶지는 않습니다. React에 대한 최고의 드래그 앤 드롭 종속성입니다.

@kesne @gaearon @xavibonell 과 동일한 문제가 발생 합니다. 기본적으로 Wordpress와 함께 React DND를 사용하고 있으며 wordpress 미디어 업 로더는 파일 업로드에 기본 드롭 이벤트를 사용합니다. onDrop 콜백은 앱에서 ReactDND가 사용되는 경우에만 실행되지 않습니다. Reactdnd 드롭 대상을 제거하면 문제가 해결됩니다. 나는 프로젝트에 몇 달을 보냈고 reactdnd는 그것의 핵심 부분이며 광범위하게 사용되었습니다. 이 시점에서 나는 분명히 다른 도서관으로 이동할 여유가 없습니다. 이 스레드와 Stack Overflow의 유사한 보고서에서이 문제가 꽤 오랫동안 존재했음을 알 수 있습니다. 이것에 대한 모든 해결책을 많이 주시면 감사하겠습니다.

예, 기본 요소와 사용자 정의 dnd 요소간에 잘못된 상호 작용이있을 가능성이 있습니다. 현재 문제를 조사 할 시간이 많지 않지만이 프로젝트를 위해 시간을 할애 할 계획이며 이것이 제가 가장 먼저 살펴 보는 문제 중 하나가 될 것입니다.

가능하다면, 우리가 이것을 처리하는 가장 좋은 방법을 알아낼 수 있도록 복제 예제로 최소한의 저장소 설정을 얻는 것이 매우 유용 할 것입니다.

@kesne 귀하의 답변에 감사 기쁩니다 . 나는 확실히 당신을 위해 라이브 예제를 만들고 빠른 시일 내에 여기에 링크를 게시 할 것입니다.
그 동안 나는 일시적인 해킹을 생각한 것 같고 아직 철저히 테스트하지는 않았지만 지금은 트릭을 수행하는 것 같습니다. 모든 이벤트 리스너를 창 요소에 바인딩하는 HTML5Backend에 setup () 및 teardown () 함수가 있음을 알았습니다. 필자의 경우 워드 프레스 파일 업 로더는 전체 화면을 차지하는 모달 상자이므로 모달이 열려있을 때 ReactDND 요소를 끌어서 놓을 수 없습니다. 따라서 모달 창의 열기 이벤트 중에 백엔드의 인스턴스 (DragDropManager를 통해 사용 가능)에서 teardown () 함수를 호출하고 모달이 닫히는 동안 setup () 함수를 호출합니다. 이것은 잘 작동하는 것 같지만 분해 및 설정 함수를 다시 호출하면 기존 또는 새로 렌더링 된 구성 요소에서 ReactDND에 다른 문제가 발생할 수 있는지 알려주시겠습니까?

이것이 문제입니다 : https://github.com/react-dnd/react-dnd-html5-backend/blob/85fc956c58a5d1a9fde2fca3c7fca9115a7c87df/src/HTML5Backend.js#L452

코드의 주석 "Do n't show a nice cursor"에 따르면 e.dataTransfer.dropEffect 를 표시 속성으로 만 취급하는 것 같습니다. 그러나 dropEffect를 none 실제로 파일이 모두 함께 삭제되는 것을 방지하는 것 같습니다. move , copy 또는 link 잘 작동합니다. 이것은 Chrome 55.0.2에 있습니다.

우리는 실제로 react-dnd 외부에서 이것을 모두 함께 복제 할 수 있습니다. 문제를 분리하는 바이올린을 만들었습니다 : https://jsfiddle.net/ypr6os00/8/

dropEffect에 대한 effectAllowed 가 작동하는 반면 dropEffect 는 프리젠 테이션

편집 : 이것은 https://github.com/gaearon/react-dnd-html5-backend/issues/25 와 동일한 문제입니다.

제 경우에는 e.dataTransfer.dropEffect = 'none'; (https://github.com/react-dnd/react-dnd-html5-backend/blob/85fc956c58a5d1a9fde2fca3c7fca9115a7c87df/src/HTML5Backend.js#L452)를 간단히 주석 처리하여 확인할 수 있습니다. ) 내 Dropzone 드롭 이벤트를 방해하는 react-dnd 문제를 해결했습니다.

참고로 다음과 유사한 설정이 있습니다.

<DragDropContextProvider backend={HTML5Backend}>
  <Dropzone>
    <DropTargetComponent />
    <OtherComponent>
      <DragSourceComponent1 />
      <DragSourceComponent2 />
      <DragSourceComponentN />
    </OtherComponent>
  </Dropzone>
</DragDropContextProvider>

DropTargetComponent = DropTarget(TYPE, target, collect)(Component) 및 DragSourceComponent = DragSource(TYPE, source, collect)(Component) .

이 패치 또는 더 나은 수정의 알려진 부작용이 있습니까? 그렇지 않으면 이것은 영원히 병합 될 수 있습니까?

모든 훌륭한 작업에 감사 드리며 해결 방법을 찾아 주신 @ kn0ll 에게 감사드립니다.

[편집하다]
누구에게나 유용하다면 메인 프로젝트에서이 문제가 해결 될 때까지 Github 포크 와 npm 패키지를 만들었습니다.

해결 방법에 감사드립니다

중첩 된 드롭 존에 대해 react-dropzone 예제를 사용하는 것이 효과적이라는 것을 알았습니다. 전파를 중지하고 문제라고 생각합니다. 오늘이 문제를 발견하기 전까지는 이것이 제 해결 방법이었습니다.

이 같은 문제가 발생합니다. 중첩 된 드롭 존에 대한 아이디어를 감안할 때, div 내부에 what-uploading-component를 래핑하고 해당 div에 onDragOver 속성을 추가하여 전파를 중지했습니다. 이것은 내 경우에 작동하는 것처럼 보였습니다. 여기에 예제가 있습니다 (Filepond를 사용했습니다).

 handleDragOver (event) {
    console.log('dragged over ', event.dataTransfer)
    event.stopPropagation()
  }

  render () {
    return (
      <div onDragOver={this.handleDragOver}>
        <FilePond />
      </div>
    )
  }

그러나 react-dnd가 다른 구성 요소의 d & d 기능을이 정도로 방해 할 수 있다는 생각은 마음에 들지 않습니다. d & d DOM 노드에 react-dnd를 사용하는 일부 구성 요소가 다른 구성 요소에서 d & d 파일 드롭 기능을 손상시킬 수있는 큰 사고처럼 보입니다. 라이브러리에서이 문제를 해결하려면 +1

아마도 몇 가지 빠른 해결책은 dropEffect가 어떤 소품 체인을 통해 어떻게 든 지정 될 수 있습니까?

결국 HTML5 백엔드에 @silvainSayduck 포크를 사용

곧이 문제를 해결할 가능성이 있습니까? @silvainSayduck 수정에 대한 풀 요청을 열 수 있습니까?

내 저장소에서 풀 요청을 만들었지 만 이것이 많은 도움이 될지 확신하지 못했습니다 (한 줄에 원치 않는 부작용이 있다는 주석을 달았는지 또는 모든 사용 사례에서 문제를 해결하더라도 여전히 잘 모르겠습니다).

1239 년

@darthtrevino 이 프로젝트의 공헌자로 참여

PR을 살펴보면 합리적으로 보입니다. 예제와 관련이 없는지 확인해야합니다.

# 1240에 합병

@darthtrevino 많이 감사합니다! npm 버전에서 언제 출시 되나요?

하루가 끝날 무렵-이 프로젝트에 참여할 시간이 생기면 일반적인 작업 흐름은 PR 일괄 작업을 수행 한 다음 릴리스를 자르는 것입니다.

@darthtrevino 현재 릴리스에서 사용할 수 있습니까? 언제 사용할 수 있습니까?

나는 그것이 현재 릴리스에 있다고 믿습니다. 문제가 발생하면 알려주세요

@darthtrevino 감사합니다, 사용할 수 있습니다.

이 같은 문제가 발생합니다. 중첩 된 드롭 존에 대한 아이디어를 감안할 때, div 내부에 what-uploading-component를 래핑하고 해당 div에 onDragOver 속성을 추가하여 전파를 중지했습니다. 이것은 내 경우에 작동하는 것처럼 보였습니다. 여기에 예제가 있습니다 (Filepond를 사용했습니다).

 handleDragOver (event) {
    console.log('dragged over ', event.dataTransfer)
    event.stopPropagation()
  }

  render () {
    return (
      <div onDragOver={this.handleDragOver}>
        <FilePond />
      </div>
    )
  }

그러나 react-dnd가 다른 구성 요소의 d & d 기능을이 정도로 방해 할 수 있다는 생각은 마음에 들지 않습니다. d & d DOM 노드에 react-dnd를 사용하는 일부 구성 요소가 다른 구성 요소에서 d & d 파일 드롭 기능을 손상시킬 수있는 큰 사고처럼 보입니다. 라이브러리에서이 문제를 해결하려면 +1

아마도 몇 가지 빠른 해결책은 dropEffect가 어떤 소품 체인을 통해 어떻게 든 지정 될 수 있습니까?

handleDragOver [Dropzone]에 event.stopPropagation() 를 추가하면 제 경우에 문제가 해결됩니다. 감사합니다 @vileppanen

이 스레드는 내 생명을 구했습니다

<Dropzone /> 이 react-dnd 구성 요소 내부에있는이 문제가 발생하는 경우 동일한 솔루션이 작동합니다. <div onDragOver={e=> e.stopPropagation() /> 에서 onDragOver <Dropzone /> 래핑 전파를 중지하는 데 사용됩니다.