vue2和vue3拖拽移动div

xingchen678

已于 2023-10-08 20:35:18 修改

阅读量1k

点赞数 1

分类专栏： vue 文章标签：前端 javascript vue.js

于 2023-09-28 17:26:41 首次发布

本文链接：https://blog.youkuaiyun.com/xingchen678/article/details/133387397

版权

vue 专栏收录该内容

65 篇文章

订阅专栏

文章介绍了如何在Vue2和Vue3中使用`@mousedown`、`@mousemove`和`@mouseup`事件实现拖动div，并解决Vue3中初始拖动时div位置问题。还提供了优化后的代码，确保div居中且拖拽时不会超出边界。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

直接上代码，代码可以直接运行，
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>

设置div居中后，发现一开始拖拽时，div会跑到最左边，vue3优化代码如下：

<template>
    <div id="scrm_phonebar_div"
      @mousedown="dragStart"
      style="position: absolute;left:50%;top:20px;transform: translateX(-50%);background-color:red;">
      Drag me
    </div>
</template>

<script setup>
import { onMounted,onBeforeUnmount} from 'vue';
  // 拖拽-----------start--------
  let isDragging = false;
  let startX = 0;
  let startY = 0;
  
  const dragStart = (e) => {
    e.preventDefault(); // 拖动过程中阻止浏览器默认事件
    if(e.button !== 0 || e.target !== document.getElementById("scrm_phonebar_div")) return;
    const iframeDiv = document.getElementById("scrm_phonebar_div");
    document.body.style.cursor = 'move';
    isDragging = true;
    startX = e.clientX - iframeDiv.offsetLeft;
    startY = e.clientY - iframeDiv.offsetTop;
    document.addEventListener('mousemove', drag);
    document.addEventListener('mouseup', dragEnd);
    window.addEventListener('blur', dragEnd);
  }

  const drag = (e) => {
    if(e.buttons === 0) {
        dragEnd()
        return
    }
    if (!isDragging ) return;
    const iframeDiv = document.getElementById("scrm_phonebar_div");
    document.body.style.cursor = 'move';
    let moveX = e.clientX - startX;
    let moveY = e.clientY - startY;
    if(moveX < iframeDiv.offsetWidth/2){
        moveX = iframeDiv.offsetWidth/2;
    }else if(moveX > window.innerWidth - iframeDiv.offsetWidth/2){
        moveX = window.innerWidth - iframeDiv.offsetWidth/2
    }
    if(moveY < 0){
        moveY = 0
    }else if(moveY > window.innerHeight - iframeDiv.offsetHeight){
        moveY =  window.innerHeight - iframeDiv.offsetHeight
    }
    iframeDiv.style.left = moveX + 'px';
    iframeDiv.style.top = moveY + 'px'
  }

  const dragEnd = () => {
    document.body.style.cursor = 'auto';
    isDragging = false;
    document.removeEventListener('mousemove', drag);
    document.removeEventListener('mouseup', dragEnd);
    window.removeEventListener('blur', dragEnd);
  }
// 拖拽-----------end---------
    onBeforeUnmount(() => {
        dragEnd()
    });
  <script>