vue实现PC端标签拖动效果

1.拖动需要监听鼠标按下、移动、抬起事件
2.一开始全部用methods绑定方法，后面发现用自定义指令directives比较方便，不用声明在data里声明变量，以及一个一个的绑定事件

<template>
  <div class="ad" v-drag>
    <el-badge :value="1" class="item">
      <i class="el-icon-chat-line-round icon"></i>
    </el-badge>
  </div>
</template>

<script>
export default {
  name: "AD",
  directives: {
    drag: {
      inserted(el) {
        let [x, y, l, t, isDown] = [0, 0, 0, 0, false];
        el.onmousedown = (e) => {
          //获取x坐标和y坐标
          x = e.clientX;
          y = e.clientY;
          //获取左部和顶部的偏移量
          l = el.offsetLeft;
          t = el.offsetTop;
          //开关打开
          isDown = true;
          //设置样式
          el.style.cursor = "move";
        };
        //鼠标移动
        el.onmousemove = (e) => {
          if (isDown == false) return;
          //获取x和y
          let [nx, ny] = [e.clientX, e.clientY];
          //计算移动后的左偏移量和顶部的偏移量
          let nl = nx - (x - l);
          let nt = ny - (y - t);
          el.style.left = nl + "px";
          el.style.top = nt + "px";
        };
        //鼠标抬起事件
        el.onmouseup = () => {
          //开关关闭
          isDown = false;
          el.style.cursor = "default";
        };
      },
    },
  },
};
</script>

<style>
.icon {
  font-size: 40px;
}
.ad {
  position: fixed;
  right: 20px;
  bottom: 30%;
  z-index: 9999999;
}
</style>