uniapp移动端悬浮按钮（吸附边缘）

<movable-area class="movable-area">
      <movable-view class="movable-view" :position="position" :x="x" :y="y" :direction="direction"
        :damping="damping" @change="onChange" @touchend="onTouchend" @click="record">
        <image :src="url+'/uploads/20231209/45a4381a8d120d73e310d10ad5aadc41.png'" mode="widthFix"
          class="iconImage"></image>
      </movable-view>
    </movable-area>

export default {
    data() {
      return {
        x: 364, //x坐标
        y: 700, //y坐标
        x1: 0,
        x2: 0,
        y1: 0,
        y2: 0,
        move: {
          x: 0,
          y: 0
        }
      }
    },
    onLoad() {
    },
    props: {
      damping: {
        type: Number,
        default: 10
      },
      direction: {
        type: String,
        default: "all"
      },
      position: {
        type: Number,
        default: 4
      },
    },
    mounted() {
      uni.getSystemInfo({
        success: (res) => {
          this.x1 = 0;
          this.x2 = parseInt(res.windowWidth) - 50;
          this.y1 = 0;
          this.y2 = parseInt(res.windowHeight) - 20;
          setTimeout(() => {
            if (this.position == 1 || this.position == 2) this.y = parseInt(this.y2 * 0.2);
            if (this.position == 3 || this.position == 4) this.y = parseInt(this.y2 * 0.8);
            if (this.position == 1 || this.position == 3) this.x = parseInt(this.x1);
            if (this.position == 2 || this.position == 4) this.x = parseInt(this.x2);
            this.move.x = this.x;
            this.move.y = this.y;
          }, 1000)
        }
      })
    },
    methods: {
      onChange(e) {
        if (e.detail.source == "touch") {
          this.move.x = e.detail.x;
          this.move.y = e.detail.y;
        }
      },
      onTouchend() {
        this.x = this.move.x;
        this.y = this.move.y;
        setTimeout(() => {
          if (this.move.x < this.x2 / 2) this.x = this.x1;
          else this.x = this.x2;
          console.log(this.x, this.y)
        }, 100)
      }
    }

.iconImage {
        display: block;
        width: 120rpx;
        height: 120rpx;
        animation: iconImage 5s linear infinite;
    }
    @keyframes iconImage {
        0% {
            -webkit-transform: rotate(0deg);
        }
        25% {
            -webkit-transform: rotate(90deg);
        }
        50% {
            -webkit-transform: rotate(180deg);
        }
        75% {
            -webkit-transform: rotate(270deg);
        }
        100% {
            -webkit-transform: rotate(360deg);
        }
    }
    .contact {
        width: 50px;
        height: 50px;
        overflow: hidden;
        position: absolute;
        left: 0px;
        top: 0px;
        border-radius: 100%;
        opacity: 0;
    }
    .movable-area {
        height: 100vh;
        width: 750rpx;
        top: 0;
        position: fixed;
        pointer-events: none;
        z-index: 9999999;
    }
    .movable-view {
        width: 96rpx;
        height: 96rpx;
        background-color: #2561EF;
        border-radius: 50%;
        pointer-events: auto;
        position: relative;
        z-index: 9999999;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .movable-view image {
        width: 50rpx;
        height: 50rpx;
    }