vue项目实现鼠标拖拽功能

<div
    id="back"
    @mousedown="draggableFun($event)"
 ></div>

//e.clientX和e.clientY 相对于浏览器可视区的位置
//元素.offsetLeft\ 元素.offsetTop  获取元素、节点位置 参照已定位的祖先元素的位置，
//当所有祖先都未定位则参照 body 元素
//原理：鼠标移动前后相对于浏览器可视区的位置的差值+元素相对于已定位的祖先元素的位置

// 鼠标拖拽事件
const draggableFun = (val) => {
  let div = document.getElementById("back");
  let dragFlag = false;
  let x, y;

  div.onmousedown = function (e) {
    dragFlag = true;
    e = e || window.event;
    // 获取鼠标在元素上的位置（鼠标按下时在元素上得位置）
    x = e.clientX - div.offsetLeft;
    y = e.clientY - div.offsetTop;
    
  };

  div.onmousemove = function (e) {
    if (dragFlag) {
      e = e || window.event;
      div.style.left = e.clientX - x + "px";
      div.style.top = e.clientY - y + "px";
    }
  };
  // 鼠标抬起事件
  div.onmouseup = function (e) {
    dragFlag = false;
  };
};

当鼠标按下鼠标移动的时候，记录移动中的 x、y 值，那么这个被拖拽的 dom 的 top 和

left 值就是：

top=鼠标按下时记录的 dom 的 top 值+（移动中的 y 值 - 鼠标按下时的 y 值）

left=鼠标按下时记录的 dom 的 left 值+（移动中的 x 值 - 鼠标按下时的 x 值）