Vue3之实现一个可拖拽的div

实现一个可拖拽的div写法如下：

const chatbox = ref();
const dragx = (el) => {
  let oDiv = chatbox.value; //当前元素
  let disX = el.clientX - oDiv.offsetLeft;
  let disY = el.clientY - oDiv.offsetTop;
  document.onmousemove = function (e) {
    //通过事件委托，计算移动的距离
    let l = e.clientX - disX;
    let t = e.clientY - disY;
    if (l < 0) {
      //如果左侧的距离小于0，就让距离等于0.不能超出屏幕左侧。如果需要磁性吸附，把0改为100或者想要的数字即可
      l = 0;
    } else if (l > document.documentElement.clientWidth - oDiv.offsetWidth) {
      //如果左侧的距离>屏幕的宽度-元素的宽度。也就是说元素的右侧超出屏幕的右侧，就让元素的右侧在屏幕的右侧上
      l = document.documentElement.clientWidth - oDiv.offsetWidth;
    }
    if (t < 0) {
      //和左右距离同理
      t = 0;
    } else if (t > document.documentElement.clientHeight - oDiv.offsetHeight) {
      t = document.documentElement.clientHeight - oDiv.offsetHeight;
    }
    //移动当前元素
    oDiv.style.left = l + "px";
    oDiv.style.top = t + "px";
  };
  document.onmouseup = function (e) {
    document.onmousemove = null;
    document.onmouseup = null;
  };
  // 解决有些时候,在鼠标松开的时候,元素仍然可以拖动;
  document.ondragstart = function (ev) {
    ev.preventDefault();
  };
  document.ondragend = function (ev) {
    ev.preventDefault();
  };
  return false;
};

div的代码为：

<div class="chat-box" ref="chatbox" @mousedown="dragx($event)">
  
</div>