React-dnd: 드래그 시 자동 스크롤 없음

react-dnd에 대한 이 솔루션이 있습니다: https://github.com/azuqua/react-dnd-scrollzone
이 문제는 지금 @darthtrevino에서 종료될 수 있습니다.

Sortable 개발자에게 이에 대한 솔루션을 제공하십시오.

그것을 사용하는 방법 당신은 나를 찾을 수 있습니까? @nossila

@AsceticBoy 나는 README보다 더 나은 작업을 할 수 없습니다. 거기에 많은 예가 있습니다.

나는 이것을 직접 구현했다. 기본적으로 목록 컨테이너를 드롭 대상으로 추가했습니다.

중고: findDOMNode(component).getBoundingClientRect()
내가 언제 listcontainer의 양쪽에 있었는지 알기 위해

다음: listContainerDOMNode.scrollLeft += someValue
목록을 스크롤하려면 목록 컨테이너를 스크롤합니다.

좋은 시작이지만 문제는 사용자가 포인터를 계속 잡고 있으면 호버 이벤트가 트리거되지 않아 스크롤이 중지된다는 것입니다.

포인터가 여전히있을 때 listcontainer를 스크롤하여이 문제를 해결 한 사람이 있습니까?

@노실라 타이! react-dnd-scrollzone은 매력으로 작동합니다 :)

나는 이것이 오래된 스레드라는 것을 알고 있지만 여전히 열려 있습니다 ...

react-virtualized 에서 WindowScroller 와 함께 react-dnd-scrollzone 을 성공적으로 설정한 사람이 있습니다. 그렇다면 구현을 공유할 수 있습니까?

WindowScroller , AutoSizer 및 List . scrollzone 제대로 작동하지 않았습니다.

내 문제는 WindowScroller 사용자 정의 scrollElement 를 사용하고 있다는 것을 깨달았습니다. 여기서 react-dnd-scrollzone 는 컨테이너를 래핑하는 요소로 설정합니다. 사용자 정의 스크롤 요소 소품을 추가하기 위해 포크하고 있습니다.

react-dnd-scrollzone이 더 이상 최신 react-dnd에서 작동하지 않는 것 같습니다. IMO 드래그 스크롤은 react-dnd 코어의 일부여야 합니다.

아래는 내 솔루션입니다.

const autoScrollInSafari = (step = 4) => (fn) => {
  const inSafari = /^((?!chrome|android).)*safari/i.test(navigator.userAgent);

  if (inSafari) {
    return function (p, m, c) {
      const scrollDOM = document.querySelector('.your-scroll-dom-class');
      if (scrollDOM) {
        const cursor = m.getClientOffset();
        const rect = scrollDOM.getBoundingClientRect();
        if (cursor.y - rect.top < 50) scrollDOM.scrollTop -= step;
        if (rect.bottom - cursor.y < 50) scrollDOM.scrollTop += step;
        if (cursor.x - rect.left < 50) scrollDOM.scrollLeft -= step;
        if (rect.right - cursor.x < 50) scrollDOM.scrollLeft += step;
      }
      fn.apply(this, [p, m, c]);
    };
  }

  return fn;
};

const myDropSpec = {
  drop() {
    // your drop callback
  },
  hover: autoScrollInSafari((props, monitor, component) => {
    // your hover callback
  }),
}

도움이 되기를 바랍니다. :웃다:

업데이트된 scrollzone 포크(https://github.com/frontend-collective/frontend-collective-react-dnd-scrollzone)는 7.0.2까지의 최신 버전의 react-dnd에서 작동합니다. 해당 버전을 넘어서는 react-dnd가 이 오류를 생성하는 DragDropContext를 이동했습니다.

./node_modules/frontend-collective-react-dnd-scrollzone/lib/index.js
Module not found: Can't resolve 'react-dnd/lib/DragDropContext' in 'X:\WSProjects\sonnys-queue\node_modules\frontend-collective-react-dnd-scrollzone\lib'

@Soundvessel 그것은 CommonJS/ESModule 기능 때문이었습니다. 아마도 메이저 버전 컷이었을 것입니다. react-dnd/lib/cjs/DragDropContext 찾거나 react-dnd 의 최상위 수준에서 가져올 수 있습니다.

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

최신 버전의 react-dnd를 사용할 수 있는 솔루션을 찾은 사람이 있습니까?

업데이트된 scrollzone 포크(https://github.com/frontend-collective/frontend-collective-react-dnd-scrollzone)는 7.0.2까지의 최신 버전의 react-dnd에서 작동합니다. 해당 버전을 넘어서는 react-dnd가 이 오류를 생성하는 DragDropContext를 이동했습니다.

./node_modules/frontend-collective-react-dnd-scrollzone/lib/index.js
Module not found: Can't resolve 'react-dnd/lib/DragDropContext' in 'X:\WSProjects\sonnys-queue\node_modules\frontend-collective-react-dnd-scrollzone\lib'

@Soundvessel @darthtrevino가 제안한 수정 사항을 적용했습니까?

즉시 솔루션을 찾을 수 없고 일부 솔루션은 최신 react-dnd 버전에서 작동하지 않기 때문에 직접 솔루션을 생각해 냈습니다. https://gist.github.com/orlandovallejos/ed9c79dd67e96c25cfcc8f1008df9489

나는 그것이 다른 사람을 돕기를 바랍니다.

@orlandovallejos
안녕하세요, 이 Sort 스트레스 테스트 예제에서 구현할 수 있습니까? https://react-dnd.github.io/react-dnd/examples/sortable/stress-test

나는 조금 시도했지만 성공하지 못했습니다.

@MartinN3 여기 내 친구가 있습니다: https://codesandbox.io/s/react-dnd-example-12-s3nnf

https://imgur.com/a/heuPO48

요구 사항, 오프셋, div 컨테이너(1개 이상), 스크롤 속도(PX_DIFF 변수 사용) 등에 맞게 업데이트해야 합니다.

스크롤 기능은 Chrome에서 기본적으로 작동합니다.

즉시 솔루션을 찾을 수 없고 일부 솔루션은 최신 react-dnd 버전에서 작동하지 않기 때문에 직접 솔루션을 생각해 냈습니다. https://gist.github.com/orlandovallejos/ed9c79dd67e96c25cfcc8f1008df9489

나는 그것이 다른 사람을 돕기를 바랍니다.

이것이 최고의 솔루션입니다. 해결해주셔서 정말 감사합니다 :)