小程序在某个区域拖动元素

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
      })
    },
  })