React-dnd: 拖动时没有自动滚动

react-dnd有这个解决方案： https :
也许这个问题现在可以关闭@darthtrevino

请可排序的开发人员，为此提供一些解决方案。

如何使用它你可以找我吗？ @诺西拉

@AsceticBoy我不能比 README 做得更好，那里有很多例子

我自己实现了这个。 基本上添加了列表容器作为放置目标。

使用： findDOMNode(component).getBoundingClientRect()
知道我什么时候在 listcontainer 的两边

然后： listContainerDOMNode.scrollLeft += someValue
滚动列表，滚动列表容器。

这是一个好的开始，但问题是如果用户仍然握住指针，则不会触发悬停事件，因此滚动停止。

有没有人解决过这个问题，当指针静止时滚动列表容器？

@nossila ty！ react-dnd-scrollzone 很有魅力:)

我知道这是一个旧线程，但仍然打开......

有没有人成功地将react-dnd-scrollzone与WindowScroller从react-virtualized串联起来设置。 如果是这样，您能否分享一下实施情况。

我正在使用WindowScroller 、 AutoSizer和List ； 并且无法让scrollzone正常工作。

我意识到我的问题是我使用自定义scrollElement和WindowScroller ，其中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）适用于更现代的 react-dnd 版本，包括 7.0.2。 在该版本之后，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）适用于更现代的 react-dnd 版本，包括 7.0.2。 在该版本之后，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
您好，可以在这个 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 :

我希望它可以帮助别人。

这是最好的解决方案。 非常感谢您的解决方案:)