使用自动滚动响应 dnd

Question

我正在开发一个react dnd 项目，我正在关注react-dnd 文档。一切正常，但我无法在拖动时滚动。

当我拖动一个项目并到达最后一个可放置源时，我需要一个滚动条，然后它会自动滚动并允许我将项目放在那里。

如果有人知道如何做到这一点，请与我分享。我将非常感激。

Answer 1

React Dnd 提供了DragLayer组件，可以对您有所帮助。

您可以在可滚动组件中添加 DragLayer ，并在满足滚动条件时调用回调。

您还可以添加一些 div，您可以在自定义 DragLayer 中监听 onMouseOver 事件，并抛出回调来设置父/可滚动组件的滚动。

@dragLayer( monitor => ({
   isDragging   : monitor.isDragging(),
}) )
class DragLayer extends Component {
  render() {
   if(!this.props.isDragging) {
     return null;
   }
   return <div onMouseOver={this.props.onScrollOver}></div>
  }

}

class ScrollableContainer extends Component {
....


  _doScroll(event) { 
    const scrollTaget = this._scrollTarget;
    scrollTarget.scrollTop++; //Or You can add animations here
  }

  render() {

   ...return <div style={{overflow:'auto'}}>
      <DragLayer onScrollOver={this._doScroll}/> 
     </div>;
  }
 }