How the Movable-view of a small program keeps moving

In the official case of the applet, click the button after the Movable-view just moved once (link: https://mp.weixin.qq.com/debug/wxadoc/dev/component/ movable-view.html), then I would like to move one more distance per click How to get:

Wxml:

<view class= "section" >  <view class= "Section__title" >movable-view area less than movable-area</view>  <movable-area style= "height:200px;width:200px;background:red;" >    <movable-view style= "height:50px; width:50px; background:blue;" x= "{{x}}" y= "{{y}}" direction= "All" >< c3/></movable-view>  </movable-area>  <view class= "Btn-area" >    <button size= "Mini" bindtap= "Taps" >click me to Move to (30px, 30px) </button>  </view>

Js:

Page ({  data: {    x:0,    y:0  },  taps:function (e) {let    num = ten;    Console.log (this.data.x);    This.setdata ({      x:this.data.x+num,      y:this.data.x+num    });}  )

This will enable the function

How the Movable-view of a small program keeps moving