vue3+ts:实现在某个区域拖拽元素

<template>
  <div class="box" id="box">
    <div class="drag" id="drag"></div>
  </div>
</template>

<script lang="ts" setup>
import { onMounted } from "vue";

onMounted(() => {
  const el = document.getElementById("drag");
  useMove(el);
});

function useMove(el: any) {
  el.style.position = "fixed";
  let box = document.getElementById("box") as HTMLDivElement;
  let offsetX: number, offsetY: number;
  if (el != null) {
    el.addEventListener("mousedown", function (event: any) {
      if (event.button == 0 && el != null) {
        const lexObj: any = getComputedStyle(el);

        // 拖拽元素时指针在被拖拽元素上的位置
        offsetX = event.pageX - el.offsetLeft + parseInt(lexObj["margin-left"]);
        offsetY = event.pageY - el.offsetTop + parseInt(lexObj["margin-right"]);
        console.log("offsetX,offsetY", offsetX, offsetY);

        const move = function (event: any) {
          if (el != null) {
            // 元素移动位置--基于窗口左上角
            let x = event.pageX - offsetX;
            let y = event.pageY - offsetY;
            console.log("x,y", x, y);
            console.log("box", document.getElementById("box")?.clientWidth);
            console.log("el", el.offsetWidth);
            // 判断移动范围
            if (x < 0) {
              x = 0;
            } else if (x > box?.clientWidth - el.offsetWidth) {
              x = box?.clientWidth - el.offsetWidth;
            }
            if (y < 0) {
              y = 0;
            } else if (y > box?.clientHeight - el.offsetHeight) {
              y = box?.clientHeight - el.offsetHeight;
            }
            el.style.left = x + "px";
            el.style.top = y + "px";
          }
          return false;
        };
        document.addEventListener("mousemove", move);
        const stop = function () {
          document.removeEventListener("mousemove", move);
          document.removeEventListener("mouseup", stop);
        };
        document.addEventListener("mouseup", stop);
      }
      return false;
    });
  }
}
</script>
<style scoped>
.box {
  width: 500px;
  height: 600px;
  background-color: #ccc;
}
.drag {
  width: 100px;
  height: 100px;
  background: red;
  margin: 0;
}
</style>