<view>
      <view class="move-box"  catchtouchmove="buttonMove" bindtouchstart="buttonStart"  style="top:{{buttonTop}}px;left:{{buttonLeft}}px;"  >
          懸浮圖標(biāo)
      </view>
  </view>

        let startPoint: any;
        Page({
            /**
            * 頁(yè)面的初始數(shù)據(jù)
            */
            data: {
                //按鈕位置參數(shù)
                buttonTop: 0,
                buttonLeft: 0,
                windowHeight: '',
                windowWidth: '',
            },
            /**
            * 生命周期函數(shù)--監(jiān)聽(tīng)頁(yè)面加載
            */
            onLoad() {
            },
            buttonInit() {
                // 獲取圖標(biāo)控件適配參數(shù)
                var that = this;
                wx.getSystemInfo({
                  success: function (res: any) {
                    // 屏幕寬度、高度
                    // 高度,寬度 單位為px
                    that.setData({
                      windowHeight: res.windowHeight,
                      windowWidth: res.windowWidth,
                      buttonTop: res.windowHeight * 0.70, // 這里定義按鈕的初始位置
                      buttonLeft: res.windowWidth * 0.70, // 這里定義按鈕的初始位置
                    })
                  }
                })
              },
            //以下是按鈕拖動(dòng)事件
            buttonStart: function (e: any) {
                startPoint = e.touches[0]//獲取拖動(dòng)開始點(diǎn)
            },
            buttonMove: function (e: any) {
                const endPoint = e.touches[e.touches.length - 1]//獲取拖動(dòng)結(jié)束點(diǎn)
                //計(jì)算在X軸上拖動(dòng)的距離和在Y軸上拖動(dòng)的距離
                const translateX = endPoint.clientX - startPoint.clientX
                const translateY = endPoint.clientY - startPoint.clientY
                startPoint = endPoint//重置開始位置
                let buttonTop: any = this.data.buttonTop + translateY
                let buttonLeft: any = this.data.buttonLeft + translateX
                //判斷是移動(dòng)否超出屏幕
                const windowWidth: any = this.data.windowWidth;
                const windowHeight: any = this.data.windowHeight;
                if (buttonLeft + 60 >= windowWidth) {
                    buttonLeft = windowWidth - 60;
                }
                if (buttonLeft <= 0) {
                    buttonLeft = 0;
                }
                if (buttonTop <= 0) {
                    buttonTop = 0
                }
                if (buttonTop + 60 >= windowHeight) {
                    buttonTop = windowHeight - 60 - 40;
                }
                this.setData({
                    buttonTop: buttonTop,
                    buttonLeft: buttonLeft
                })
            },
            /**
            * 生命周期函數(shù)--監(jiān)聽(tīng)頁(yè)面初次渲染完成
            */
            onReady() {
            },
            /**
            * 生命周期函數(shù)--監(jiān)聽(tīng)頁(yè)面顯示
            */
            onShow() {
                this.buttonInit();
            },
            /**
            * 生命周期函數(shù)--監(jiān)聽(tīng)頁(yè)面隱藏
            */
            onHide() {
            },
            /**
            * 生命周期函數(shù)--監(jiān)聽(tīng)頁(yè)面卸載
            */
            onUnload() {
            },
            /**
            * 頁(yè)面相關(guān)事件處理函數(shù)--監(jiān)聽(tīng)用戶下拉動(dòng)作
            */
            onPullDownRefresh() {
            },
            /**
            * 頁(yè)面上拉觸底事件的處理函數(shù)
            */
            onReachBottom() {
            },
            /**
            * 用戶點(diǎn)擊右上角分享
            */
            onShareAppMessage() {
            }
        })

    .move-box {
        position: fixed;
        width: 45px;
        height: 45px;
        background-color: aquamarine;
        border-radius: 50%;
        font-size:12px;
        text-align: center;
        padding: 5px;
        box-sizing: border-box;
        color:blueviolet;
        font-weight: 600;
    }

    {
        "navigationBarTitleText":"拖動(dòng)懸浮圖標(biāo)",
        "usingComponents": {}
    }