小程序拖动

首页红包悬浮按钮，结果还想要实现这个红包页面可拖动，，，，，

wxml：

<movable-area>
   <movable-view x="{{x}}" y="{{y}}" direction="all" animation="true">
      <!-- 红包 -->
      <view class="red-packe">
            <image src="/images/gift.png" mode="aspectFill"></image>
         </button>
      </view>
   </movable-view>
</movable-area>

.wxss:

movable-area {
   position: fixed;
   width: 100%;
   height: 100%;
   pointer-events: none;
   z-index: 2;
}
movable-view {
   right: 0rpx;
   width: 183rpx;
   height: 190rpx;
   pointer-events: auto;
}

.red-packe {
   position: fixed;
   right: 0rpx;
   bottom: 1rpx;
   width: 181rpx;
   height: 187rpx;
   display: flex;
   border-width: 0rpx;
   z-index: 1000;
}

.red-packe image {
   position: absolute;
   left: 0rpx;
   top: 0rpx;
   width: 100%;
   height: 100%;
   border-width: 0rpx;
}

.js

data:{
 	x: 0,
    y: 0,
}
//x,y为0默认为左上角
//如果想要实现右下角，需要在设置一下
//1.获取屏幕宽高；
//2.设置x,y默认值，尽量大，因为手机高度不一致，如果块movable-view超出了父类，默认是超过父类可移动区域后，不可移动；
//我设置的是x：285，y:800，大部分都适应，可以根据情况调整
//3.设置x，y宽比
	this.setData({
	    screenWidth: app.globalData.screenWidth
	})
     var percent = parseInt(this.data.screenWidth) / 375;
     this.setData({
        x: parseInt(this.data.x) * percent,
        y: parseInt(this.data.y) * percent
     })
     ```