Réagir avec défilement automatique Dnd

Question

Je travaille sur un projet DND pour réagir que je suis la react-dnd documentation. Tout fonctionne correctement mais je ne suis pas capable de faire défiler tout en faisant glisser.

je besoin d'une barre de défilement lorsque je traînais un article et qui ont atteint la dernière source droptable puis il défilera automatiquement et me permettre de placer l'élément là-bas.

Si quelqu'un a une idée comment faire cela, alors s'il vous plaît partager avec moi. Je serai très reconnaissant.

Answer 1

React Dnd fournit des composants DragLayer qui peut être utile pour vous.

Vous pouvez ajouter DragLayer à l'intérieur de votre composant incriminable et appeler le rappel dès que votre condition de défilement est satisfaite.

Vous pouvez également ajouter quelques div sur lequel vous pouvez écouter l'événement onMouseOver dans la coutume et DragLayer jeter rappel pour régler Parchemin de composant parent/scrollable.

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