使线在HTML画布上可拖动

Question

我正在做一个reactjs项目。我在画布上画了一条垂直线，在画布上水平移动（就像视频时间线一样）。当我单击播放按钮时，线条开始在画布上平滑移动。这是我的代码

class App extends Component {

    state = {
        playing: false,
        xPos:1
    }

    componentDidMount(){
        canvas = document.getElementsByTagName("canvas")[0];
        ctx = canvas.getContext("2d");

        w = canvas.width;
        h = canvas.height;

        ctx.fillStyle = "#808891";
    }

    updateVert = () => {
        var that = this
        console.log("inside upver")
        if(play) {
            cancelAnimationFrame(this.updateVert);
            return;
        }

       this.setState({xPos: this.state.xPos + 1}, ()=>{
           if(this.state.xPos >= w) {
               // stop animation...
               this.setState({xPos:0, playing:false});
           }
           ctx.clearRect(0, 0, w, h);

           // draw new one...
           ctx.beginPath();
           ctx.strokeStyle = "#19f";
           ctx.lineWidth = 2;
           ctx.moveTo(this.state.xPos, 0);
           ctx.lineTo(this.state.xPos, 200);
           ctx.stroke();

           if(this.state.playing) {
               console.log("yes true")
               requestAnimationFrame(this.updateVert)
           };
       })
        // reset rectangle content to erase previous line...
    }

    actionButton(){

        if(this.state.playing) {
            // pause...
            this.setState({playing:false},()=>{
                console.log(this.state.playing)
            })
        }
        else {
            this.setState({playing:!this.state.playing},()=>{
                console.log(this.state.playing)
                this.updateVert();
            })

        }
    }

  render() {
        return (
            <div>
                <div className="App">
                    <canvas id="DemoCanvas" width="500" height="200"></canvas>
                </div>
                <div id="overlay">This div is over the canvas</div>
                <button onClick={this.actionButton.bind(this)}>{this.state.playing ? "Stop":"Play"}</button>
            </div>


    );
  }
}

蓝线移动。

我想要的内容：我想向该行添加移动拖动功能。就像我应该能够水平擦洗线条。我不能那样做。