微信小程序实现可拖拽小部件

微信小程序实现上报按钮可拖拽

使用原生的视图容器movable-area 和 movable-view，由此查看官方文档

实现代码

<movable-area class="moveBox">
  <movable-view x="200" y="400" direction="all" class="imgBox">
    <image src="../../../assets/imgs/report.png" mode="" class="img" bindtap="gotoReport" />
  </movable-view>
</movable-area>
<view>你自己的代码</view>

一开始设置盒子占满整个页面，发现会移出容器，发现是以红色为中心点。简单的解决办法，对宽高做处理。
如果对movable-area做层级处理，可能会导致<view>你自己的代码</view> 被遮挡，对css重新做修改
____________

.img {
  width: 176rpx;
  height: 176rpx;
}

.imgBox {
  position: fixed;
  z-index: 999;
}

.moveBox {
  width: calc(100% - 180rpx);
  height: calc(100vh - 180rpx);
  position: absolute;
}