React dnd with auto Scroll

Question

我正在研究一个反应dnd项目，我遵循react-dnd documentation。一切工作正常，但拖动时无法滚动。

我需要一个滚动条，当我拖动一个物品并且已经到达最后一个可压缩的来源时，它会自动滚动并允许我将物品放在那里。

如果有人有任何想法如何做到这一点，那么请与我分享。我会非常感激。

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>; 
    } 
}