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