vue2和vue3拖拽移动div

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

<template>
    <div
      ref="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>
    <div
      ref="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>