微信小程序视图容器movable-area是一个可移动的区域，在页面中可以拖拽滑动。对于那些需要在小程序中加入拖拽和滑动操作的企业来说，movable-area与movable-view组合的使用，提供了非常好用的解决方案。

1. movableView的特点

movableView具体有哪些特点呢？除了上述介绍的可移动、拖拽和滑动以外，它还具有以下几个属性：

1. direction：移动方向，有all、vertical、horizontal、none四种选择；
2. inertia ：是否带有惯性；
3. out-of-bounds ：超过可移动区域后是否还可以移动；
4. x 和 y ：分别代表x轴和y轴方向的偏移；
5. damping ：控制x或y改变时的动画和过界回弹的动画，值越大移动越快；
6. friction ：控制惯性滑动的动画，值越大摩擦力越大，滑动越快停止；必须大于0，否则会被设置为默认值。

2. movableArea与movableView的使用

同时，我们需要注意以下几点：

movable-view必须在<movable-area/>组件中，并且必须是直接子节点，否则不能移动。

并且，在使用时，我们需要给movable-area设置height和width属性，默认情况下为10px。如果movable-view小于movable-area，则移动范围是在movable-area内；反之，范围必须包含movable-area（沿x轴和y轴分别考虑）。

3.示例代码

<view style="height:300px;">
  <movable-area style="height: 200px;width: 200px;background: red;">
    <movable-view style="height: 50px; width: 50px; background: blue;" x="{{x}}" y="{{y}}" direction="all">
    </movable-view>
  </movable-area>
</view>

Page({
  data: {
    x: 0,
    y: 0
  }
})

通过上述示例代码，可以看到movable-view就像一个单独的视图组件一样被嵌入到了movable-area中，可以随意拖拽和滑动进行移动操作。如此方便实用的movable-area该得到大家的青睐。如果贵企业在小程序中需要加入拖拽、滑动操作，那么不妨考虑采用movable-area与movable-view组合的方式。