divを円滑にドラッグ

Question

ドラッグ可能なdivを作成したいと思います。私はブラウザのレンダリングとスムーズな結果に関して改善する方法を知りました。

jsfiddle

mouseDown() { 
this.setState({ 
    thumbActive: true, 
}); 
}, 

mouseUp() { 
this.setState({ 
    thumbActive: false, 
}); 
}, 

mouseMove(e) { 
    if(!this.state.thumbActive) { 
    return; 
    } 

    const y = e.nativeEvent.offsetY; 
    this.setState({ 
    topPosition: y, 
    }); 
}, 

HTML

<div 
     className='scroll' 
     onMouseMove={this.mouseMove} 
    > 
     <div className={this.state.thumbActive ? 'thumb pointer-events-none' : 'thumb'} 
     onMouseDown={this.mouseDown} 
     onMouseUp={this.mouseUp} 
     style={{top: this.state.topPosition}} 
     /> 
    </div> 

Answer 1

reactJSは、多くの時間を節約する、ドラッグして試してみて、プラグインをドロップします。

プラグイン - react-dnd