jquery - 自動スクロールで dnd に反応する

Question

私はreact-dnd documentationに従っているreact dndプロジェクトに取り組んでいます。すべて正常に動作していますが、ドラッグ中にスクロールできません。

アイテムをドラッグしていて、最後のドロップ可能なソースに到達するとスクロール バーが必要になり、自動スクロールしてそこにアイテムを配置できるようになります。

誰かがこれを行う方法を知っている場合は、私と共有してください。とても感謝しています。

Answer 1

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

スクロール可能なコンポーネント内に 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>;
  }
 }