div를 부드럽게 드래그

Question

나는 드래그 가능한 div를 만들고 싶습니다. 브라우저 렌더링 및 매끄러운 결과에 관해 어떻게 향상시킬 수 있을지 궁금합니다.

jsfiddle

reactJS

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

은 드래그 시도하고 많은 시간을 절약 할 플러그인을 놓습니다.

플러그인 - react-dnd