小程序 movable-view 在頁面中的可移動圖標

項目中需要一個可拖動的小圖標，

1.小程序組件movable-view

文檔地址：https://developers.weixin.qq.com/miniprogram/dev/component/movable-view.html#movable-area

movable-view可移動的范圍是在整個movable-area區域，所以movable-area是必須的，一般圖標可以全屏幕移動的，movable-areas就是pages下的最高父級，包裹所有節點的

附上代碼，有需要了解的可以直接留言：

wxml:

<movable-area>
  <movable-view x="{{x}}" y="{{y}}" direction="all">
  　<view>
      <image bindtap='xs' mode='' src='../images/car.jpg' style="width:100rpx;height:100rpx;"></image>
    </view>
  </movable-view>
</movable-area>

wxss:

movable-view {
  display: flex;
  align-items: center;
  justify-content: center;
  /* background: #1AAD19; */
  color: #fff;
  position: fixed;
  z-index: 9999;
  width: 176rpx;
  height: 176rpx;
  right: auto;
  background: #000;
}
movable-area {
  height: 100%;
  width: 100%;
  /* margin: 50rpx; *//* background-color: #ccc; */
  overflow: hidden;
  position: relative;
  z-index: 9999;
  background: #fff
}

js:

x,y可以定義圖標的起始位置
Page({
      data:{
        x: 0,
　　     y: 0,
　　　   scale: 2,
      }                    
})

movable-view屬性：

　　out-of-bounds：超過可移動范圍是否允許拖動     默認false     為true時，可以拖動圖標到范圍之外一小段距離，然后平滑回到范圍之內，