vue3实现拖动功能，原生js

<template>  
  <div  
    class="video-overlay"  
    @mousedown="startDrag"  
    @mousemove="drag"  
    @mouseup="endDrag"  
    @mouseleave="endDrag"  
    ref="draggableDiv"  
  >  
    <video class="draggable-video" controls loop src="../../assets/rabbit320.mp4" alt="景点视频"></video>  
  </div>  
</template>  
  
<script setup lang="ts">  
import { ref, onMounted, onUnmounted } from 'vue';  
  
const draggableDiv = ref<HTMLElement | null>(null);  
  
let dragging = false;  
let currentX = 0;  
let currentY = 0;  
let initialX = 0;  
let initialY = 0;  
let offsetX = 0;  
let offsetY = 0;  
  
const startDrag = (event: MouseEvent) => {  
  dragging = true;  
  initialX = event.clientX - offsetX;  
  initialY = event.clientY - offsetY;  
};  
  
const drag = (event: MouseEvent) => {  
  if (dragging) {  
    event.preventDefault();  
    const newX = event.clientX - initialX;  
    const newY = event.clientY - initialY;  
    offsetX = newX;  
    offsetY = newY;  
    setTranslate(newX, newY);  
  }  
};  
  
const endDrag = () => {  
  dragging = false;  
};  
  
const setTranslate = (xPos: number, yPos: number) => {  
  if (draggableDiv.value) {  
    draggableDiv.value.style.transform = `translate(${xPos}px, ${yPos}px)`;  
  }  
};  
  
onMounted(() => {  
  // 确保在组件挂载后绑定事件  
  document.addEventListener('mousemove', drag);  
  document.addEventListener('mouseup', endDrag);  
  document.addEventListener('mouseleave', endDrag);  
});  
  
onUnmounted(() => {  
  // 组件卸载时移除事件监听器  
  document.removeEventListener('mousemove', drag);  
  document.removeEventListener('mouseup', endDrag);  
  document.removeEventListener('mouseleave', endDrag);  
});  
</script>  
  
<style scoped>  
.video-overlay {  
  position: absolute;  
  cursor: move;  
  /* 其他样式 */  
}  
  
.draggable-video {  
  /* 视频样式 */  
}  
</style>