vue2实现窗口拖动

lookinglove1

于 2024-05-05 15:15:44 发布

阅读量522

点赞数 8

CC 4.0 BY-SA版权

文章标签： vue.js 前端

本文链接：https://blog.youkuaiyun.com/lookinglove1/article/details/138467116

本文介绍了如何在Vue2项目中通过JavaScript事件监听（如mousedown、mousemove和mouseup）实现窗口的拖动功能，包括获取元素引用、跟踪鼠标位置并更新元素位置的代码示例。

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

在vue2的项目中实现窗口的拖动效果

<div class="notification" ref="notification" v-if="modalVisible" @mousedown="startDrag"></div>

我写的这个点击后窗口显示出来我当时实现的是显示的窗口可以进行拖动的效果

    // 拖拽功能
    startDrag(event) {
      this.notification = this.$refs.notification; // 获取弹窗元素的引用
      this.startX = event.clientX;
      this.startY = event.clientY;
      this.offsetX = this.notification.offsetLeft;
      this.offsetY = this.notification.offsetTop;

      document.addEventListener('mousemove', this.dragging);
      document.addEventListener('mouseup', this.stopDrag);
    },
    dragging(event) {
      const offsetX = event.clientX - this.startX;
      const offsetY = event.clientY - this.startY;
      this.notification.style.left = this.offsetX + offsetX + 'px';
      this.notification.style.top = this.offsetY + offsetY + 'px';
    },
    stopDrag() {
      document.removeEventListener('mousemove', this.dragging);
      document.removeEventListener('mouseup', this.stopDrag);
    },