使用React创建轮播图（3）拖拽+优化代码

---

前言

使用React创建轮播图（1）框架+自动跳转
使用React创建轮播图（2）小按钮

---

一、目标功能

在前言两次修改的基础上再次添加拖拽功能
拖拽功能
(1)：实施跟踪拖动：当鼠标拖动时，图片移动的距离与鼠标滑动的距离相等
(2)：判断滑动区域功能：当鼠标取消点击时，如果拖动距离没有超过图片宽度一半距离则还原，如果超过宽度一半距离，则切换向右/向左
(3)：离开目标区域还原：当鼠标离开轮播图时，图片还原到原先位置

二、优化内容

(1)修改原先图片left属性的设置
旧：使用数组储存left的值通过改变No，left值
新：引用width全局常量，left=No*width
(2)底部小按钮的修改
旧：使用数字1234
新：使用o代替，并且计划跟踪页面●效果

三、实现方法

通过onMouseDown和onMouseUp以及onMouseMove监听鼠标在区域内滑动的全过程
(1)：onMouseDown：使用clientX记录初始位置x_start
(2)：onMouseMove：实时更新clientX值存入x_last，根据当前clientX-x_last的值改变left实现实时滑动
(3)：onMouseUp：根据当前clientX，根据x_start-clientX的值根据情况讨论，实现结果事件

down(e){
   
    this.setState({
   
        flag:true,
        x_last: e.clientX,
        x_start:e.clientX
    })
    document.getElementsByClassName('mid')[0].style.transition="0s";
}

move(e){
   
    let move=0;
    if(this.state.flag===true){
   
        move=this.state.x_last-e.clientX;
        this.setState({
   
            x_last:e.clientX,
            left:this.state.left-move
        })
    }
}

up(e){
   
    this.setState({
   
        flag:false,
    })
    document.getElementsByClassName('mid')[0].style.transition="1s";
    if(this.state.x_start-e.clientX>0 && Math.abs(this.state.x_start-e.clientX)>=Math.abs(width/2)){
   
        this.tick_right();
    }
    else if(this.state.x_start-e.clientX<0 && Math.abs(this.state.x_start-e.clientX)>=Math.abs(width/2)){
   
        this.tick_left();
    }
    else{
   
        this.setState({
   
            left:this.state.No* width
        }) 
    }