拖拽移动改变元素位置

<template>
    <div class="main cursor-move draggable" @mousedown="handleDragStar">
     拖拽目标元素 
    </div>
</template>

<script setup lang="ts">

  const handleDragStar = (e) => {
    const box: any = document.querySelector('.box');
    let disX = e.pageX - box.offsetLeft;
    let disY = e.pageY - box.offsetTop;

    document.onmousemove = function (e) {
      e.preventDefault();
      // 鼠标移动的时候计算元素的位置
      let x, y;
      // e.pageX - disX  鼠标在页面上的位置 - 鼠标在元素中的偏移位置  得到的是元素相对于页面左上角的偏移位置
      if (e.pageX - disX > 0) {
        // 元素相对于页面左上角的偏移位置 大于0时
        if (e.pageX - disX > document.documentElement.clientWidth - 720) {
          // 元素相对于页面左上角的偏移位置 移出到页面以外（右侧）
          x = document.documentElement.clientWidth - 720; // 60是元素自身的宽高
        } else {
          x = e.pageX - disX;
        }
      } else {
        // 元素移到到页面以外（左侧）
        x = 0;
      }

      if (e.pageY - disY > 0) {
        if (e.pageY - disY > document.documentElement.clientHeight - 340) {
          // 元素移动到页面以外（底部）
          y = document.documentElement.clientHeight - 340;
        } else {
          y = e.pageY - disY;
        }
      } else {
        // 元素移动到页面以外（顶部）
        y = 0;
      }

      box.style.left = x + 'px';
      box.style.top = y + 'px';
    };

    document.onmouseup = function () {
      document.onmousemove = null;
      document.onmouseup = null;
    };
  };

</script>

<style lang="less" scoped>
  .box {
    position: fixed;
    top: calc(50% - 140px);
    left: calc(50% - 360px);
    width: 720px;
    border: 1px solid #eee;
    border-radius: 6px;
    background-color: #fff;
  }
</style>