Vue2中div拖拽调整大小时，鼠标松开后尺寸回弹如何解决？

Question

在 Vue2 中实现 div 拖拽调整大小时，常见问题：鼠标按下并拖动边框（如右下角句柄）可实时改变宽高，但松开鼠标后尺寸瞬间“回弹”至初始值。根本原因通常是未正确持久化拖拽结束时的最终尺寸——例如：`@mousedown` 启动拖拽逻辑后，`@mousemove` 更新临时尺寸（如 `tempWidth`），但未在 `@mouseup` 或 `@mouseleave` 中将临时值同步到响应式数据（如 `this.width`）；或因事件监听器绑定在非目标元素（如 document）上但未正确移除/作用域丢失，导致 `mouseup` 未触发；亦或 CSS `transition` 过渡影响了内联样式的即时生效。此外，若使用 `v-bind:style` 动态绑定宽高但数据未响应式更新，也会表现为视觉回弹。该问题虽表象为 UI 跳变，实则暴露了状态管理与事件生命周期协同的典型疏漏。

Answer 1

```html

一、现象层：UI回弹的直观表现与复现路径

用户拖动右下角句柄时，div宽高实时变化（视觉流畅），但鼠标松开瞬间尺寸“啪”地跳回初始值——此非渲染卡顿，而是真实状态未落盘。典型复现场景：<div @mousedown="startResize" class="resizable"></div> + 句柄元素 <div class="resize-handle bottom-right"></div>，配合 @mousemove 动态设置 style.width/height 内联样式。

二、事件流层：mouseup 为何“失联”？三大陷阱剖析

• 监听器挂载错位：在句柄上 @mousedown 后，将 document.addEventListener('mousemove', ...) 和 document.addEventListener('mouseup', ...) 绑定到全局，但组件销毁前未 removeEventListener，导致后续实例的 mouseup 被旧闭包捕获（this 指向已销毁实例）；
• 事件冒泡中断：句柄使用 pointer-events: none 或父容器 overflow: hidden 截断了 mouseup 事件传播路径；
• 移动端兼容缺失：仅监听 mouseup，未补充 touchend，iOS/Safari 下松手后无响应。

三、响应式层：Vue2 的数据劫持盲区与临时变量陷阱

常见错误模式：data() { return { width: 300, tempWidth: 300 } }，mousemove 中只改 this.tempWidth 并用于内联样式绑定，却未在 mouseup 中执行 this.width = this.tempWidth。根本原因：Vue2 无法自动追踪非响应式属性（tempWidth 若未声明在 data 中则不触发更新），且 v-bind:style="{ width: tempWidth + 'px' }" 依赖的源数据未同步至响应式体系。

四、样式层：CSS transition 的隐性干扰机制

CSS 声明	对拖拽的影响	修复方案
transition: all 0.2s ease;	松手瞬间，浏览器尝试从“拖拽中内联样式”过渡回“原始 CSS 宽高”，造成视觉回弹	拖拽期间动态添加 style.transition = 'none'，mouseup 后恢复
box-sizing: border-box 缺失	拖拽计算未扣除 padding/border，导致尺寸偏差放大	统一设为 box-sizing: border-box，并在 JS 计算中显式处理边框

五、架构层：状态持久化缺失引发的生命周期失配

核心矛盾：拖拽是瞬时交互行为，而尺寸是持久化业务状态。若将尺寸仅存于组件局部 data，路由切换或组件重渲染即丢失；若存于 Vuex，却未在 mouseup 后提交 mutation，则状态与视图永久脱钩。正确路径应为：mousedown → store.commit('START_RESIZE', { id }) → mousemove → store.dispatch('UPDATE_RESIZE_TEMP', { id, w, h }) → mouseup → store.dispatch('COMMIT_RESIZE', { id })。

六、调试验证层：四步定位法（附 Mermaid 流程图）

graph TD
  A[观察回弹时刻] --> B{mouseup 是否触发？}
  B -->|否| C[检查 event listener 移除逻辑 & 作用域]
  B -->|是| D{this.width 是否被赋值？}
  D -->|否| E[补全 mouseup 中的响应式赋值]
  D -->|是| F{Vue Devtools 中 width 值是否变更？}
  F -->|否| G[检查 data 声明完整性 & Object.defineProperty 劫持状态]
  F -->|是| H[审查 CSS transition / box-sizing / 重绘触发条件]

七、工业级解决方案：可复用 ResizeHandler Mixin

export const ResizeHandler = {
  data() {
    return {
      isResizing: false,
      resizeStart: { x: 0, y: 0, w: 0, h: 0 },
      // ✅ 所有参与计算的字段必须声明为响应式
      width: 300,
      height: 200,
      minWidth: 100,
      minHeight: 60
    }
  },
  methods: {
    startResize(e) {
      e.preventDefault()
      this.isResizing = true
      this.resizeStart = {
        x: e.clientX,
        y: e.clientY,
        w: this.width,
        h: this.height
      }
      document.addEventListener('mousemove', this.onResize)
      document.addEventListener('mouseup', this.stopResize)
      // ✅ 补充 touch 支持
      document.addEventListener('touchmove', this.onResize, { passive: false })
      document.addEventListener('touchend', this.stopResize)
    },
    onResize(e) {
      if (!this.isResizing) return
      const dx = e.clientX - this.resizeStart.x
      const dy = e.clientY - this.resizeStart.y
      // ✅ 边界校验 + 响应式赋值（非 tempWidth）
      this.width = Math.max(this.minWidth, this.resizeStart.w + dx)
      this.height = Math.max(this.minHeight, this.resizeStart.h + dy)
      // ✅ 动态禁用 transition 防抖动
      this.$el.style.transition = 'none'
    },
    stopResize() {
      this.isResizing = false
      // ✅ 关键：持久化最终尺寸（即使 mousemove 已更新 width/height）
      // 此处显式触发一次 Vue 更新确保 DOM 同步
      this.$nextTick(() => {
        this.$el.style.transition = ''
      })
      document.removeEventListener('mousemove', this.onResize)
      document.removeEventListener('mouseup', this.stopResize)
      document.removeEventListener('touchmove', this.onResize)
      document.removeEventListener('touchend', this.stopResize)
    }
  }
}

```