<template>
  <view>
    <movable-area
      class="movable-area"
      :style="{
        zIndex: isRemove ? 982 : 981,
      }"
      :scale-area="false"
    >
      <movable-view
        class="movable-view"
        :class="!isRemove ? 'animation-info' : ''"
        style="pointer-events: auto"
        @click="clickBtn"
        @touchstart="touchstart"
        @touchend="touchend"
        @change="onChange"
        direction="all"
        inertia="true"
        :x="x"
        :y="y"
        :disabled="disabled"
        :out-of-bounds="false"
        :damping="200"
        :friction="100"
      >
        <slot></slot>
      </movable-view>
    </movable-area>
  </view>
</template>


<script>
export default {
  props: {
    //是否禁用拖动
    disabled: {
      type: Boolean,
      default: false,
    },
    //是否自动停靠
    canDocking: {
      type: Boolean,
      default: true,
    },
    //按钮默认位置离底部距离（px）
    bottomPx: {
      type: Number,
      default: 200,
    },
    //按钮默认位置离右边距离（px）
    rightPx: {
      type: Number,
      default: 375,
    },
  },
  data() {
    return {
      left: 0,
      top: 0,
      isRemove: false,
      windowWidth: 0,
      windowHeight: 0,
      btnWidth: 0,
      btnHeight: 0,
      x: 0,
      y: 600,
      old: {
        x: 0,
        y: 0,
      },
      topHeight: 0,
    };
  },
  mounted() {
    const that = this;
    uni.getSystemInfo({
      success: function (res) {
        that.topHeight = res.safeArea.top * 2;
      },
    });
    this.$nextTick(() => {
      this.getSysInfo();
    });
  },
  methods: {
    getSysInfo() {
      let sysInfo = uni.getSystemInfoSync();
      this.windowWidth = sysInfo.windowWidth;
      this.windowHeight = sysInfo.windowHeight;
      // #ifdef MP-WEIXIN
      let view = uni.createSelectorQuery().in(this).select(".movable-view");
      view
        .boundingClientRect((rect) => {
          if (!rect) return;
          this.btnWidth = rect.width;
          this.btnHeight = rect.height;
          this.x = this.old.x;
          this.y = this.old.y;
          this.$nextTick((res) => {
            // this.x = this.windowWidth - this.btnWidth - this.rightPx;
            this.x = 0;
            this.y = this.windowHeight - this.btnHeight - this.bottomPx;
          });
        })
        .exec();
      // #endif
      // #ifdef MP-ALIPAY
      let view = my.createSelectorQuery().in().select(".movable-view");
      view.boundingClientRect().exec((rect) => {
        if (!rect) return;
        this.btnWidth = rect[0].width;
        this.btnHeight = rect[0].height;
        this.x = this.old.x;
        this.y = this.old.y;
        this.$nextTick((res) => {
          //   this.x = this.windowWidth - this.btnWidth - this.rightPx;
          this.x = 0;
          this.y = this.windowHeight - this.btnHeight - this.bottomPx;
        });
      });
      // #endif
    },
    //移动按钮
    onChange(e) {
      this.old.x = e.detail.x;
      this.old.y = e.detail.y;
    },
    //开始移动
    touchstart(e) {
      this.isRemove = true;
    },
    //结束移动
    touchend(e) {
      if (this.canDocking && this.old.x) {
        this.x = this.old.x;
        this.y = this.old.y;
        let bWidth = (this.windowWidth - this.btnWidth) / 2;
        if (this.x < 0 || (this.x > 0 && this.x <= bWidth)) {
          this.$nextTick((res) => {
            this.x = 0;
          });
        } else {
          this.$nextTick((res) => {
            this.x = this.windowWidth - this.btnWidth;
          });
        }
        if (this.y <= this.topHeight) {
          this.$nextTick((res) => {
            this.y = this.topHeight;
          });
        }
        this.isRemove = false;
      }
      this.$nextTick(() => {
        this.$emit("dragIconDTouchend");
      });
    },
    //点击按钮
    clickBtn() {
      this.$emit("clickBtn");
    },
    updateY(y) {
      this.y = y;
    },
  },
};
</script>


<style scoped>
.movable-view {
  width: 146rpx;
  height: 146rpx;
  /* background: linear-gradient(360deg, #287BF8 0%, #6EA8FF 100%); */
  /* box-shadow: 0px 4rpx 12rpx 0px #ADC3F8; */
  border-radius: 50rpx;
  color: #ffffff;
  font-size: 26rpx;
  touch-action: none;
  display: flex;
  align-items: center;
  justify-content: center;
}


.animation-info {
  transition: left 0.25s ease;
}


.movable-area {
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  pointer-events: none;
}
</style>

我有两个拖拽组件，在停止时动态计算两个组件的位置并算出是否重叠然后更新位置，但是实际测试中只要沿着屏幕边缘进行拖拽时，组件的touchend事件并不会响应，调试中也没有log输出