小程序 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:;

  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:;

  background: #fff

}

js:

x,y可以定义图标的起始位置
Page({

      data:{

        x: 0,

　　     y: 0,

　　　   scale: 2,

      }

})

movable-view属性：

　　out-of-bounds：超过可移动范围是否允许拖动     默认false     为true时，可以拖动图标到范围之外一小段距离，然后平滑回到范围之内，