小程序悬浮按钮可拖动自动靠边

wxml代码

// <!-- x,y初始化按钮位置 -->
<movable-area class="movable-area">

 <movable-view x="{{x}}" y="{{y}}"  animation="{{false}}" class="movable-view" direction='all'   catchtap="getPrompt" bindtouchend="touchendFun" bindchange="movableChange">
    <image style="width: 160rpx;height: 160rpx;"  fit="cover" mode="scaleToFill"></image>
 </movable-view>
</movable-area>

wxss代码

 .movable-area{
    pointer-events:none;
    /* 这个属性设置为none,让所有事件穿透过去 */
    z-index: 100;
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
   }
   .movable-view{
    pointer-events:auto;
    /* 重设为auto,覆盖父属性设置  宽高要跟图片大小一致*/
    height: 160rpx;
    width: 160rpx;
    /* background: red; */
   }

js代码

data:{
    mx: 0,
    my:0,
    x:"600px",
    y: ""
    }
//方法
  //拖动事件
  movableChange(event){
    this.setData({
        mx : event.detail.x,
        my : event.detail.y
    })
  },
  //拖动失去事件
  touchendFun(event){
      //获取屏幕宽度，自动靠边
    if(app.globalData.screenWidth / 2 > this.data.mx+40){
        this.setData({
            x : `0px`,
            y : `${this.data.my }px`
        })
    }else{
        this.setData({
            x : `${app.globalData.screenWidth }px`,
            y : `${this.data.my  }px`
        })
    }
  },

获取设备屏幕宽度方法

 //获取当前设备信息
     wx.getSystemInfo({
      success: res => {
          console.log(res)
        this.globalData.screenWidth = res.screenWidth;
        this.globalData.screenHeight = res.screenHeight;
      },
      fail(err) {
        console.log(err);
      }
    })