小程序上是实现拖动悬浮图标

小程序上是实现拖动图标

效果

index.wxml

  <view>
      <view class="move-box"  catchtouchmove="buttonMove" bindtouchstart="buttonStart"  style="top:{{buttonTop}}px;left:{{buttonLeft}}px;"  >
          悬浮图标
      </view>
  </view>

index.ts

        let startPoint: any;
        Page({

            /**
            * 页面的初始数据
            */
            data: {
                //按钮位置参数
                buttonTop: 0,
                buttonLeft: 0,
                windowHeight: '',
                windowWidth: '',
            },

            /**
            * 生命周期函数--监听页面加载
            */
            onl oad() {

            },
            buttonInit() {
                // 获取图标控件适配参数
                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, // 这里定义按钮的初始位置
                    })

                  }
                })
              },
            //以下是按钮拖动事件
            buttonStart: function (e: any) {
                startPoint = e.touches[0]//获取拖动开始点
            },
            buttonMove: function (e: any) {
                const endPoint = e.touches[e.touches.length - 1]//获取拖动结束点
                //计算在X轴上拖动的距离和在Y轴上拖动的距离
                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
                //判断是移动否超出屏幕
                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
                })
            },
            /**
            * 生命周期函数--监听页面初次渲染完成
            */
            onReady() {

            },

            /**
            * 生命周期函数--监听页面显示
            */
            onShow() {
                this.buttonInit();
            },

            /**
            * 生命周期函数--监听页面隐藏
            */
            onHide() {

            },

            /**
            * 生命周期函数--监听页面卸载
            */
            onUnload() {

            },

            /**
            * 页面相关事件处理函数--监听用户下拉动作
            */
            onPullDownRefresh() {

            },

            /**
            * 页面上拉触底事件的处理函数
            */
            onReachBottom() {

            },

            /**
            * 用户点击右上角分享
            */
            onShareAppMessage() {

            }
        })

index.wxss

    .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;
    }

index.json

    {
        "navigationBarTitleText":"拖动悬浮图标",
        "usingComponents": {}
    }