moveable.wxml
<!--movable-view 子容器 与movable-area 父容器
movable-view是一个可移动的视图容器组件，在页面中可以拖拽滑动以及缩放
movable-view组件必须放在movable-area标签中，并且必须是直接子节点，否则不能移动
movable-area组件中可以放多个movable-view组件
movable-view组件的移动范围必须在父容器movable-area组件范围内。
-->
<!--movable-view的常用属性
direction：设置移动方向，取值：all、vertical、horizontal、none
inertia:设置移动时是否有惯性效果，默认为false
out-of-bounds：超过可移动区域后，movable-view是否还可以移动（默认false）
x:定义x轴方向的偏移（默认0）
y:定义y轴方向的偏移（默认0）
scale:是否支持双指缩放（默认为false）
scale-min:定义缩放倍数的最小值
scale-max:定义缩放倍数的最大值
-->
<movable-area style="height: 200px;width: 100%;background-color: yellow;">
<movable-view style="height: 50px;width: 50px;background-color: teal;" x="{{x}}" y="{{y}}" direction="all">
</movable-view>
</movable-area>
<!--plain:设置按钮是否镂空，false则不镂空，有边框效果-->
<button size="mini" bindtap="tap" plain="false">
click me
</button>
moveable.js
Page({
tap:function(event){
var x = 140;
var y = 80;
this.setData({
x: x,
y: y
})
}
})