自動dndと反応する

Question

私はreact-dnd documentationに従っている反応dndプロジェクトに取り組んでいます。すべてが正しく機能していますが、ドラッグしながらスクロールすることはできません。

アイテムをドラッグしていて最後のドロップ可能なソースに達したときにスクロールバーが必要な場合は、スクロールバーが自動スクロールしてアイテムをそこに置くことができます。

これを行う方法を知っている方は、私と共有してください。私は非常に感謝しています。

Answer 1

React DndはDragLayerを提供します。あなたに役立つコンポーネントです。

Scollableコンポーネント内にDragLayerを追加し、スクロール条件が満たされたときからコールバック を呼び出すことができます。

また、カスタムDragLayer内でonMouseOverイベントを聴いたり、親/スクロール可能コンポーネントのスクロールを設定するコールバックを投げたりできるdivを追加することもできます。

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