uni-app 技术分享| 用 uni-app 实现拖动的诀窍

  <view ref="move" @touchstart="drag_start">    <AR-CanvasView ref="location" style="flex: 1;" />  </view>

const BindingX = uni.requireNativePlugin('bindingx');

      data() {        return {            // 页面高宽            windowWidth: 200,          windowHeight: 400,          // 记录当前位置          position: {                 x: 0,                y: 0              },            // 判断是点击事件还是拖动事件                  timer: false,        }      }

      // 获取元素      getEl(el) {        if (typeof el === 'string' || typeof el === 'number') return el;          if (WXEnvironment) {            return el.ref;          } else {            return el instanceof HTMLElement ? el : el.$el;           }      },

      drag_start(e) {          const move = this.getEl(this.$refs.move);          let oBindingX = BindingX.bind({                anchor: move,                eventType: 'pan',                props: [{                    element: move,                    property: 'transform.translateX',                    expression: `x+${this.position.x}`,                  },                  {                    element: move,                    property: 'transform.translateY',                    expression: `y+${this.position.y}`,                    }                ]              }, (e) => {                if (e.state === 'end') {                  if (this.timer) {                                   //移动时间特别短暂 视为点击事件                    clearTimeout(this.timer);                                  // 点击事件处理                  }                  BindingX.unbind({                    token: oBindingX.token,                    eventType: 'pan'                  })                  //记录位置                   this.position.x += e.deltaX;                  this.position.y += e.deltaY;                  // x轴边界                  if (-this.position.x >= (this.windowWidth - 193)) {                    this.position.x = 193 - this.windowWidth;                  }                  if (this.position.x > 0) {                    this.position.x = 0;                  }                  // y 轴边界                   if (this.position.y < 0) {                    this.position.y = 0;                  }                  if (this.position.y >= (this.windowHeight - 244)) {                    this.position.y = this.windowHeight - 244;                  }                              // 结束拖动                  this.endAmaier();                } else {                              // 判断点击事件还是拖动事件                  this.timer = setTimeout(() => {                    this.timer = null;                  }, 50)                }              });                  }            // 结束拖动      endAmaier(e) {          const my = this.getEl(this.$refs.move);        let result = BindingX.bind({                eventType: 'timing',                exitExpression: 't>200',                props: [{                    element: my,                    property: 'transform.translateX',                    expression: "easeOutElastic(t," + this.position.x + "," + 0 +                      ",200)",                  },                  {                    element: my,                    property: 'transform.translateY',                    expression: "easeOutElastic(t," + this.position.y + "," + 0 +                      ",200)",                  }                ]              }, (e) => {                if (e.state === 'end' || e.state === 'exit') {                  BindingX.unbind({                    token: result.token,                    eventType: 'timing'                  })                }              });      }