弹框可拖拽,松开鼠标后停留在当前位置

js部分

 // 弹框拖拽效果
  directives: {
    drag:{
      // 指令的定义
      inserted: function(el) {
        // el.drag();
        console.log(el);
        //获取元素
        // var dv = document.getElementById("dv");
        let x = 0;
        let y = 0;
        let l = 0;
        let t = 0;
        let isDown = false;
        //鼠标按下事件
        el.onmousedown = function(e) {
          //获取x坐标和y坐标
          x = e.clientX;
          y = e.clientY;

          //获取左部和顶部的偏移量
          l = el.offsetLeft;
          t = el.offsetTop;
          //开关打开
          isDown = true;
          //设置样式
          el.style.cursor = "move";
        };
        //鼠标移动
        window.onmousemove = function(e) {
          if (isDown == false) {
            return;
          }
          //获取x和y
          let nx = e.clientX;
          let ny = e.clientY;
          //计算移动后的左偏移量和顶部的偏移量
          let nl = nx - (x - l);
          let nt = ny - (y - t);

          el.style.left = nl + "px";
          el.style.top = nt + "px";
        };
        //鼠标抬起事件
        el.onmouseup = function() {
          //开关关闭
          isDown = false;
          el.style.cursor = "default";
        };
      }


    }
  },

html部分
用的时候只要在div里面添加   v-drag就行

<template>
  <div class="home">
    <div v-drag></div>
  </div>
</template>