当前位置：首页 > VUE

vue实现弹窗拖拽效果

2026-02-23 10:26:21VUE

实现弹窗拖拽的基本思路

通过监听鼠标事件（mousedown、mousemove、mouseup）计算位移差值，动态更新弹窗的定位样式（如transform或top/left）。需结合Vue的响应式数据和事件绑定实现。

vue实现弹窗拖拽效果

核心代码实现

<template>
  <div 
    class="dialog" 
    :style="{ left: position.x + 'px', top: position.y + 'px' }"
    @mousedown="startDrag"
  >
    <div class="dialog-header">拖拽标题</div>
    <div class="dialog-content">弹窗内容</div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      position: { x: 0, y: 0 },
      dragData: {
        isDragging: false,
        startX: 0,
        startY: 0
      }
    }
  },
  methods: {
    startDrag(e) {
      this.dragData = {
        isDragging: true,
        startX: e.clientX - this.position.x,
        startY: e.clientY - this.position.y
      }
      document.addEventListener('mousemove', this.onDrag)
      document.addEventListener('mouseup', this.stopDrag)
    },
    onDrag(e) {
      if (!this.dragData.isDragging) return
      this.position = {
        x: e.clientX - this.dragData.startX,
        y: e.clientY - this.dragData.startY
      }
    },
    stopDrag() {
      this.dragData.isDragging = false
      document.removeEventListener('mousemove', this.onDrag)
      document.removeEventListener('mouseup', this.stopDrag)
    }
  }
}
</script>

<style>
.dialog {
  position: fixed;
  width: 300px;
  border: 1px solid #ddd;
  cursor: move;
}
.dialog-header {
  padding: 10px;
  background: #f5f5f5;
}
</style>

优化方案

边界限制
添加边界检测防止拖出可视区域：

vue实现弹窗拖拽效果

onDrag(e) {
  if (!this.dragData.isDragging) return

  let x = e.clientX - this.dragData.startX
  let y = e.clientY - this.dragData.startY

  // 限制在窗口范围内
  const maxX = window.innerWidth - this.$el.offsetWidth
  const maxY = window.innerHeight - this.$el.offsetHeight
  x = Math.max(0, Math.min(x, maxX))
  y = Math.max(0, Math.min(y, maxY))

  this.position = { x, y }
}

性能优化
使用CSS transform代替top/left避免重排：

<div 
  class="dialog"
  :style="{ transform: `translate(${position.x}px, ${position.y}px)` }"
>

封装为指令

可复用拖拽指令：

Vue.directive('drag', {
  bind(el, binding) {
    let isDragging = false
    let startX, startY

    el.style.position = 'fixed'
    el.style.cursor = 'move'

    el.addEventListener('mousedown', (e) => {
      isDragging = true
      startX = e.clientX - el.offsetLeft
      startY = e.clientY - el.offsetTop
      document.addEventListener('mousemove', move)
      document.addEventListener('mouseup', up)
    })

    function move(e) {
      if (!isDragging) return
      el.style.left = `${e.clientX - startX}px`
      el.style.top = `${e.clientY - startY}px`
    }

    function up() {
      isDragging = false
      document.removeEventListener('mousemove', move)
      document.removeEventListener('mouseup', up)
    }
  }
})