movable-area是微信小程序的新组件，可以用来移动视图区域movable-view。移动方向可选择任何、垂直和平行。可移动区域里包含其他文本、图片、按钮等组件。可移动区域可绑定touchend等事件。movable-view的参数可调整动画效果。
本次小程序实现两个按钮的拖动互换，垂直移动。wxml如下：
movable-area style="height: 200px;width: 200px;background: red;" movable-view bindtouchend="kg" style="height: 50px; width: 150px; background: blue;" x="{{x1}}" y="{{y1}}" direction="vertical" button bindtap="gg"客服哥哥/button /movable-view movable-view bindtouchend="km" style="height: 50px; width: 150px; background: green;" x="{{x2}}" y="{{y2}}" direction="vertical" button bindtap="mm"客服妹妹/button /movable-view /movable-areajs文件如下，拖动一个按钮时，另一个按钮到对面。
Page({ data: { x1: 10, y1: 10, x2: 10, y2: 100 }, gg: function () { wx.makePhoneCall({ phoneNumber: '12345' //仅为示例，并非真实的电话号码 }) }, mm: function () { wx.makePhoneCall({ phoneNumber: '54321' //仅为示例，并非真实的电话号码 }) }, kg: function (e) { console.log(e.changedTouches[0].pageY) var y = e.changedTouches[0].pageY if (y 100) { this.setData({ x1: 10, y1: 10, x2: 10, y2: 100 }) } else { this.setData({ x2: 10, y2: 10, x1: 10, y1: 100 }) } }, km: function (e) { console.log(e.changedTouches[0].pageY) var y = e.changedTouches[0].pageY if (y 100) { this.setData({ x1: 10, y1: 10, x2: 10, y2: 100 }) } else { this.setData({ x2: 10, y2: 10, x1: 10, y1: 100 }) } },})
