直接上代码，代码可以直接运行，
vue2拖拽移动div：

<template><divref="draggable"@mousedown="dragStart"@mousemove="drag"@mouseup="dragEnd"style="width:100px;height:100px;background-color:red;">Drag me</div>
</template><script>
export default {data() {return {isDragging: false,startX: 0,startY: 0,moveX: 0,moveY: 0}},methods: {dragStart(e) {this.isDragging = true;this.startX = e.clientX - this.moveX;this.startY = e.clientY - this.moveY;},drag(e) {if (!this.isDragging) return;this.moveX = e.clientX - this.startX;this.moveY = e.clientY - this.startY;if(this.moveX < 0) {this.moveX = 0;} else if(this.moveX + this.$refs.draggable.offsetWidth > window.innerWidth) {this.moveX = window.innerWidth - this.$refs.draggable.offsetWidth;}if(this.moveY < 0) {this.moveY = 0;} else if(this.moveY + this.$refs.draggable.offsetHeight > window.innerHeight) {this.moveY = window.innerHeight - this.$refs.draggable.offsetHeight;}this.$refs.draggable.style.transform = `translate(${this.moveX}px, ${this.moveY}px)`;},dragEnd() {this.isDragging = false;}},mounted() {this.moveX = this.$refs.draggable.offsetLeft;this.moveY = this.$refs.draggable.offsetTop;document.addEventListener('mousemove', this.drag);document.addEventListener('mouseup', this.dragEnd);},beforeDestroy() {document.removeEventListener('mousemove', this.drag);document.removeEventListener('mouseup', this.dragEnd);}
}
</script>

vue3拖拽移动div：

<template><divref="draggable"@mousedown="dragStart"@mousemove="drag"@mouseup="dragEnd"style="width:100px;height:100px;background-color:red;">Drag me</div></template><script setup>import { ref, onMounted, onUnmounted } from 'vue';const draggable = ref(null);let isDragging = false;let startX = 0;let startY = 0;let moveX = 0;let moveY = 0;const dragStart = (e) => {isDragging = true;startX = e.clientX - moveX;startY = e.clientY - moveY;}const drag = (e) => {if (!isDragging) return;moveX = e.clientX - startX;moveY = e.clientY - startY;if(moveX < 0) {moveX = 0;} else if(moveX + draggable.value.offsetWidth > window.innerWidth) {moveX = window.innerWidth - draggable.value.offsetWidth;}if(moveY < 0) {moveY = 0;} else if(moveY + draggable.value.offsetHeight > window.innerHeight) {moveY = window.innerHeight - draggable.value.offsetHeight;}draggable.value.style.transform = `translate(${moveX}px, ${moveY}px)`;}const dragEnd = () => {isDragging = false;}onMounted(() => {moveX = draggable.value.offsetLeft;moveY = draggable.value.offsetTop;document.addEventListener('mousemove', drag);document.addEventListener('mouseup', dragEnd);});onUnmounted(() => {document.removeEventListener('mousemove', drag);document.removeEventListener('mouseup', dragEnd);});</script>