想當年沒畢業的時候，上課下課睡覺前想的都是程式碼，原生隨手移動分分鐘，現在做個東西跟要命一樣，我不禁在想，難道是工作磨滅了我對這份興趣的熱愛，還是我本就不是一個喜歡堅持的人 ，來吧做個記錄，好記性不如爛筆頭。

思路：

1.移動端觸控事件

　　a.當按下手指時，觸發ontouchstart；

b. 當移動手指時，觸發ontouchmove；

　　c. 當移走手指時，觸發ontouchend；

當有級別比這些事件級別更高的時候，會取消當前的touch操作，即觸發ontouchcancel。一般會在ontouchcancel時暫停遊戲等

2.div隨手移動的本質是：滑鼠移動改變位置，隨即改變div的left、top

3.注意邊界值，0 < left <clientWidth

核心:

1.從my移動到event.my位置，獲取滑鼠點選div位置。為event.x

2.實際距離移動位置event.mx' 即event.mx'-event.mx ,event.my'-event.my

3.移動時不變數，disX = event.my - div.offsetTop 、disY = event.mx - div.offsetLeft

4.移動後的top、left值為，top：event.my' - disY 、left =event.mx’ - disX ，

那麼核心程式碼如下：

  onTouchStart(e) {
       // 手指按下時的座標
        this.starX = e.touches[0].clientX;
        this.starY = e.touches[0].clientY;
        this.disX =  this.starX- this.oDiv.offsetLeft;
        this.disY = this.starY - this.oDiv.offsetTop;
}

   onTouchMove(e) {
        e.preventDefault(); //防止移動穿透
        this.L = e.touches[0].clientX - this.disX;
        this.T = e.touches[0].clientY - this.disY;
     
        // 限制拖拽的X範圍，不能拖出螢幕
        if (this.L < 0) {
            this.L = 0;
        } 
        if (this.L > document.documentElement.clientWidth - this.oDiv.offsetWidth) {
            this.L = document.documentElement.clientWidth - this.oDiv.offsetWidth;
        }
        // 限制拖拽的Y範圍，不能拖出螢幕
        if (this.T < 0) {
            this.T = 0;
        } 
       if (this.T > document.documentElement.clientHeight - this.oDiv.offsetHeight) {
            this.T = document.documentElement.clientHeight - this.oDiv.offsetHeight;
        }

        this.moveX = this.L;
        this.moveY = this.T;

        this.setState({
            offsetLeft: this.moveX,
            offsetTop: this.moveY
        });
    }

onTouchEnd(e) {
        // 計算結束的位置是靠左還是靠右
        let oLeft = this.state.offsetLeft;
        if (oLeft < (document.documentElement.clientWidth - this.oDiv.offsetWidth) / 2) {
            oLeft = 0;
        } else {
            oLeft = document.documentElement.clientWidth - this.oDiv.offsetWidth;
        }
        this.setState({
            offsetLeft: oLeft
        });
    }

歡迎轉載~，請標註來源~，覺得有用的話，幫忙點個贊