React-dnd: ドラッグ時に自動スクロールなし

react-dndにはこのソリューションがあります： //github.com/azuqua/react-dnd-scrollzone
多分この問題は今@darthtrevinoで閉じることができます

ソート可能な開発者に、これに対するいくつかの解決策を提供してください。

使い方は私を探すことができますか？ @nossila

@AsceticBoy READMEよりも優れた仕事をすることはできません。そこにはたくさんの例があります

私はこれを自分で実装しました。 基本的に、listcontainerをドロップターゲットとして追加しました。

使用済み： findDOMNode(component).getBoundingClientRect()
私がいつリストコンテナのどちらかの側にいたかを知るために

次に： listContainerDOMNode.scrollLeft += someValue
リストをスクロールするには、リストコンテナをスクロールします。

これは良いスタートですが、問題は、ユーザーがポインターを保持している場合でもホバーイベントがトリガーされないため、スクロールが停止することです。

ポインタがまだあるときにリストコンテナをスクロールして、誰かがこれを解決しましたか？

@nossila ty！ react-dnd-scrollzoneは魅力として機能します:)

私はこれが古いスレッドであることを知っていますが、まだ開いています...

誰も成功していセットアップreact-dnd-scrollzoneとWindowScrollerからreact-virtualizedタンデムでを。 もしそうなら、あなたは実装を共有できますか？

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 ：

それが他の誰かに役立つことを願っています。

@orlandovallejos
こんにちは、このソートストレステストの例に実装できますか？ 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 ：

それが他の誰かに役立つことを願っています。

これが最善の解決策です。 解決策をありがとうございました:)