vue3.0局部自定义指令，实现拖拽效果

不废话，直接上代码。

​
<template>
  <div>
    <h4>局部自定义指令</h4>
    <---使用指令的地方和方式--->
    <div class="box" v-drag></div>
  </div>
</template>

<script>
import { reactive, toRefs } from "vue";
export default {
    //自定义指令方式
  directives: {
    drag: {
      mounted(el, binding) {
        //mousemove,mousedown,mouseup
        console.log(el);
        el.style.position = "absolute";
        el.addEventListener("mousedown", (event) => {
          //获取刚开始的坐标值
          let x1 = event.clientX;
          let y1 = event.clientY;

          //获取盒子刚开始便移位置
          let L = el.offsetLeft;
          let T = el.offsetTop;

          document.onmousemove = function (event) {
            //获取移动后的坐标值
            let x2 = event.clientX;
            let y2 = event.clientY;
            //判断左右移动的位置
            let maxW = document.documentElement.clientWidth - el.clientWidth;
            let maxH = document.documentElement.clientHeight - el.clientHeight;
            let w = x2 - x1 + L;
            if (w <= 0) {
              w = 0;
            }
            if (w >= maxW) {
              w = maxW;
            }
            let h = y2 - y1 + T;
            if (h <= 0) {
              h = 0;
            }
            if (h >= maxH) {
              h = maxH;
            }
            el.style.left = w + "px";
            el.style.top = h + "px";
          };
          
          document.onmouseup=function () {
              document.onmousemove = null
          }
        });
      },
    },
  },
  name: "DemoprojectDIrective",
  setup() {
    const data = reactive({
      username: "张三",
    });
    return {
      ...toRefs(data),
    };
  },
};
</script>
<style lang="less" scoped>
.box {
  width: 150px;
  height: 150px;
  background-color: red;
}
</style>

​