正常情况下，一个元素创建后，如果不使用js或者css动画，它是无法实现移动的，微信小程序加入了movable-view组件来实现，movable-view组件，是可以完成元素的移动的，但是这个容器必须放在movable-area中才能移动，因此实际上是这两个组件配合使用才能实现移动的效果的。
1、movable-view基本的使用
1.1、wxml代码：
direction是movable-view的移动方向，属性值默认的是none，属性值有all，vertical，horizontal等，inertia是movable-view是否带有惯性，即在拖动事件取消后是否还会往取消前的方向滑动一小段，out-of-bounds指的是当拖拽的元素超过移动的区域后，movable-view是否还可以移动。
movable-area指的是当里面的movable-view设置为支持双指缩放时，设置此值可将缩放手势生效区域修改为整个movable-area。
<movable-area class="area" scale-area>
<movable-view class="view" direction="all" inertia out-of-bounds >
</movable-view>
</movable-area>
1.2、wxss代码：
.area {
width: 100%;
height: 200px;
margin-top: 100px;
overflow: hidden;
background: bisque;
}
.view {
width: 50px;
height: 50px;
background: blueviolet;
}
2、movable-view中damping阻尼系数的设置
damping指的在移动过程中，用来控制x或y改变时的动画和过界回弹的动画，值越大的话，移动的越快
2.1、wxml代码：
<movable-area class="area" scale-area>
<movable-view class="view" damping="10" direction="all" x="{{x}}" y="{{y}}" inertia out-of-bounds >
</movable-view>
</movable-area>
<button bind:tap="onTap">点击移动</button>
2.2、wxss代码：
.area {
width: 100%;
height: 200px;
margin-top: 100px;
overflow: hidden;
background: bisque;
}
.view {
width: 50px;
height: 50px;
background: blueviolet;
}
2.3、js事件
onTap:function(){
this.setData({
x:100,
y:200
})
},
damping为10：
damping为200：
3、movable-view中friction摩擦系数的设置以及双指缩放
3.1、设置摩擦系数wxml代码：
friction是摩擦系数，用于控制惯性滑动的动画，值越大摩擦越大，滑块停止的越快，默认值为2。
<movable-area class="area" scale-area>
<movable-view class="view" friction="10" damping="20" direction="all" x="{{x}}" y="{{y}}" inertia out-of-bounds >
</movable-view>
</movable-area>
<button bind:tap="onTap">点击移动</button>
3.2、双指缩放的wxml代码：
scale指的是否支持双指缩放，默认缩放手势是控制在movable-view区域中，除非在area中设置了scale-area属性，scale-min是定义缩放倍数的最小值，scale-max是定义缩放倍数的最大值，scale-value定义缩放倍数，取值范围为0.5~10
<movable-area class="area" scale-area>
<movable-view class="view" friction="10" scale scale-value="2" damping="20" direction="all" x="{{x}}" y="{{y}}" inertia out-of-bounds >
</movable-view>
</movable-area>
<button bind:tap="onTap">点击移动</button>
4、movable-view的滑动事件的注意事项
htouchmove当一开始的时候手指触摸移动为横向的移动，则会触发此事件，这里是指的一开始的方向为横向，一旦一开始的方向非横向，则是被catch。
vtouchmove当一开始的时候手指触摸移动的方向为纵向则会触发此事件。
4.1、wxml代码
<movable-area class="area" scale-area>
<movable-view bind:change="onHTouchMove" class="{{view}}" friction="10" damping="20" direction="all" x="{{x}}" y="{{y}}" inertia out-of-bounds >
</movable-view>
</movable-area>
4.2、wxss代码
.view {
width: 50px;
height: 50px;
background: blueviolet;
}
.overview {
width: 50px;
height: 50px;
background: chartreuse;
}
4.3、js事件
当横向移动大于50px时触发样式修改
onLoad: function (options) {
this.setData({
view:'view'
})
},
onHTouchMove:function(event){
var x = event.detail.x;
if(x > 50){
this.setData({
view:'overview'
})
}
},
纵向事件同样如此，这种事件一般用于做那种滑动删除，假期可以试下
5、movable-view的注意点!
movable-view必须设置width和height属性，不设置的话默认为10px，其次movable-view默认的是绝对定位，top和left属性均初始为0px，当movable-view小于movable-area时，movable-view的移动范围是在movable-area内。
movable-view必须在<movable-area />组件中，并且必须是直接子节点，否则不能移动.
