wxml

  <view class="page-body">

      <movable-area>
        <movable-view x="{{x}}" y="{{y}}" direction="all">text</movable-view>
      </movable-area>
    <view >
        <button class="btn"  bindtap="tap">移動到 (30px, 30px)</button>
    </view>
  </view>

ps:==>
movable-view的可移動區域。
movable-area 必須設定width和height屬性，不設定預設為10px
當movable-view小於movable-area時，movable-view的移動範圍是在movable-area內；

tip: movable-view 必須設定width和height屬性，不設定預設為10px
tip: movable-view 預設為絕對定位，top和left屬性為0px
movable-view必須在 movable-area 元件中，並且必須是直接子節點，否則不能移動。
 

wxss

movable-area{
    width: 600rpx;
    height: 600rpx;
    background: #ccc;
}
movable-view{
    width: 100rpx;
    height: 100rpx;
    background: pink;
}
.btn{
    height: 80rpx;
    text-align: center;
    line-height: 80rpx;
    width: 680rpx !important; //設定按鈕的寬度，必須要新增important
    background: pink;
}

js

Page({
    data: {
      x: 0,
      y: 0,
      scale: 2,
    },
    tap() {
      this.setData({
        x: 30,
        y: 30
      })
    },
  })