微信小程序拖动组件之movable-view

movable-view 是一个可移动的视图容器，在页面中可以拖拽滑动。（movable-view必须在 movable-area 组件中，并且必须是直接子节点，否则不能移动。）

属性：

微信图片_20190605161005.png

用法：

<movable-area style="height: 300px;width: 300px;background: red;">
  <movable-view direction="all" style="height: 100px; width: 100px; background: pink;">
  </movable-view>
</movable-area>

效果如图：

微信图片_20190605163257.png

我们用movable-area设定了一个300x300大小的一个可拖动区域(红色)，然后在这个区域内放置了一个大小为100x100的可以拖动内容movable-view（粉色），这个可拖动内容的direction设置为all，表示可以在任意方向上进行拖动。

在一个movable-area标签中，其实不止可以放一个movable-view，它支持放置多个movable-view

<movable-area style="height: 300px;width: 300px;background: red;">

  <!--粉色任意方向拖动-->
  <movable-view direction="all" style="height: 100px; width: 100px; background:pink ;">
  </movable-view>

  <!--蓝色属性direction="horizontal"只能横向拖动-->
  <movable-view direction="horizontal" style="height: 50px; width: 50px; background: blue;">
  </movable-view>

</movable-area>

微信图片_20190605163808.png

如有不明 请移驾:https://developers.weixin.qq.com/miniprogram/dev/component/movable-view.html

微信图片_20190605164626.png