v3实现拖拽（ref版）纯代码

<template>

  <div class="drag" ref="dragBox"></div>

</template>

<script setup lang="ts">

import { ref, onMounted } from "vue";

const dragBox = ref<HTMLDivElement>();

const drag = {

  x: 0,

  y: 0,

  disX: 0,

  disY: 0,

};

 

onMounted(() => {

  const onMove = (ev: MouseEvent) => {

    drag.x = ev.clientX - drag.disX;

    drag.y = ev.clientY - drag.disY;

    dragBox.value!.style.left = drag.x + "px";

    dragBox.value!.style.top = drag.y + "px";

  };

  const onUp = () => {

    document.onmousemove = null;

    document.onmouseup = null;

  };

  dragBox.value!.onmousedown = (ev: MouseEvent) => {

    drag.disX = ev.clientX - dragBox.value!.offsetLeft;

    drag.disY = ev.clientY - dragBox.value!.offsetTop;

    document.onmousemove = onMove;

    document.onmouseup = onUp;

    return false;

  };

});

console.log(dragBox.value, 99966);

 

</script>

<style scoped>

.drag {

  width: 100px;

  height: 100px;

  background: red;

  position: absolute;

  left: 0;

  top: 0;

}

</style>