小程序实现可拖动的悬浮图标

小程序实现可拖动的悬浮图标
wxml

<movable-area class="movablebox" style="height:{{phoneHeight}}px">
  <movable-view x="{{x}}" y="{{y}}" direction="all" class='movableview'>
    <image mode="widthFix" src='https://sucai.suoluomei.cn/sucai_zs/images/20210305115408-add.png'></image>
  </movable-view>
</movable-area>

wxss

.movablebox {
  position: fixed;
  width: 100%;
}

.movableview {
  position: fixed;
  width: 100rpx;
  z-index: 100;
}

image {
  width: 100%;
  height: 100%;
}

js

data: {
    x: 750, //x轴方向的偏移
    y: 750, //y轴方向的偏移
    phoneWidth: 0, //设备可用宽度
    phoneHeight: 0 //设备可用高度
  },
  
  onLoad: function (options) {
    this.getPhoneInfo()
  },

  //获取设备信息
  getPhoneInfo() {
    wx.getSystemInfo({
      success: (res) => {
        console.log(res)
        this.setData({
          phoneWidth: res.windowWidth,
          phoneHeight: res.windowHeight,
          x: res.windowWidth - 80,
          y: res.windowHeight - 200
        })
      }
    })
  },