<template>
  <div
    ref="button"
    class="draggable-button"
    id="draggable-button"
    @mousedown="dragButton"
    @touchstart="dragButton"
  >
    <uni-icons @click="goHome" style="padding-right: 10rpx;" custom-prefix="iconfont" type="icon-subdirectory_arrow_left" size="20" color="#fff"></uni-icons>
	 
  </div>
</template>

<script setup>
import { ref } from "vue";

const button = ref(null);
let startX, startY, posX, posY, mouseMoveTracker, mouseUpTracker;

const goHome = () => {
  uni.reLaunch({ url: "/pages/main/index/index" });
};

const dragButton = (event) => {
  // event.preventDefault();
  console.log(event.touches, "48566546546545");
  if (event.touches) {
    // 初始化坐标
    startX = event.touches[0]?.clientX - button.value.offsetLeft;
    startY = event.touches[0]?.clientY - button.value.offsetTop;
  }

  // 添加鼠标移动监听
  mouseMoveTracker = (event) => {
    document.body.style.overflow = "hidden";
    posX = event.touches[0]?.clientX - startX;
    posY = event.touches[0]?.clientY - startY;
    if (posX < 0) {
      posX = 0;
    } else if (posX > document.body.clientWidth - button.value.clientWidth) {
      posX = document.body.clientWidth - button.value.clientWidth;
    }
    if (posY < 0) {
      posY = 0;
    } else if (posY > document.body.clientHeight - button.value.clientHeight) {
      posY = document.body.clientHeight - button.value.clientHeight;
    }
    button.value.style.top = `${posY}px`;
    button.value.style.left = `${posX}px`;
  };
  document.addEventListener("touchmove", mouseMoveTracker);

  // 添加鼠标释放监听
  mouseUpTracker = () => {
    document.body.style.overflow = "auto";
    document.removeEventListener("touchmove", mouseMoveTracker);
    document.removeEventListener("touchend", mouseUpTracker);
  };
  document.addEventListener("touchend", mouseUpTracker);
};
</script>

<style>
.draggable-button {
  position: fixed;
  cursor: pointer;
  /* 其他样式 */
  right: 20rpx;
  top: 14rpx;
  width: 60rpx;
  height: 60rpx;
  border-radius: 50%;
  background-color: #cdcdcd;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 900000;
}
</style>
