一个东西可以在一块区域内自由地移动，可以使用微信小程序的 movable-view 组件 .. 先在页面上用一个 movable-area 去定义一块可移动的区域 ..

它里面可以包装一下可移动的视图容器 .. movable-view .. 在这个组件上添加一个 direction 属性，它可以设置一下可移动的方向，默认是 none ，就是不能移动 .. 它的值还可以是 all 任意方向 ，vertical 垂直方向，还有 horizontal 水平方向 .. 先把它设置成 all

然后打开页面的样式文件，去定义一下可移动区域还有可移动视图的样式 .. movable-area .. 设置一下可移动区域的宽度 .. 100vw .. 还有它的高度 .. 50vh .. 再给它添加一个背景颜色 .. #ededed

可移动视图 .. movable-view ，用 width .. 设置一下它的宽度 .. 让它等于 80px .. height 可以设置高度 .. 也把它设置成 80px .. 最后再给它添加一个背景颜色 .. #6435c9 ..

现在页面上的灰色的背景这块就是一块可移动的区域 .. 它里面包装的这个紫色的方块就是一个可移动视图 .. 它可以在这块可移动区域以内自由地移动 ..

属性

inertia [ɪˈnɜ:rʃə] 可以在可移动视图上添加惯性 .. 添加一个 inertia ，把它的值设置成 true .. 现在这个紫色的块就会有惯性 .. 移动它的时候，停止以后，它仍然会继续移动一段距离 ..

默认这个可移动视图不能越过它所在的可移动区域 .. 我们可以给它添加一个 out-of-bounds 属性 .. 让它等于 true ...

这样这个可移动视图就可以越过一点它的可移动区域 .. 松开手以后，会自动弹回去..

在可移动视图上可以添加 x 还有 y 属性 .. 它们可以控制可移动视图在水平还有垂直的位置 ..