vue3,使用v-draggable拖动时卡顿的问题

mini_0552025-08-15 15:35

在使用v-draggable实现拖拽功能时，发现一个问题，如果我拖拽的div里面是文字时，拖拽时就很流畅（如下图左）；但是我div里面使用img 时，拖拽的时候就会很发现很明显的卡顿（如下图右）。

原因去网上搜了下，发现比较符合的就是一下几点：

1、图片加载性能问题

<img> 加载未优化（如大尺寸图片、未压缩、未使用懒加载）。

浏览器需要额外计算图片的 布局（Layout）和渲染（Paint），导致拖动时帧率下降（FPS 降低）。

2、浏览器重绘（Repaint）开销

图片比文本更复杂，拖动时浏览器需要 频繁重绘（Repaint）。

如果图片是 非矢量图（如 PNG/JPG），重绘成本更高。

解决方案：

pointer-events: none：让鼠标事件穿透图片，直接由外层的 div 处理拖动，减少事件计算。

完整代码：

javascript 复制代码

<template>
  <div class="box">
    <!-- 左图，文字 -->
    <div
      v-draggable="{
        bounds: 'body',
      }"
      class="draggable-class"
    >
      拖动
    </div>
    <!-- 右图，图片 -->
    <div
      v-draggable="{
        bounds: 'body',
      }"
      class="draggable-two"
    >
      <img
        :src="图片地址"
        alt="图片"
      />
    </div>
  </div>
</template>

<style lang="scss" scoped>
.box {
  width: 100%;
  height: 100%;
  background-color: #fff;

  .draggable-class {
    position: fixed;
    left: 48px;
    top: 100px;
    width: 50px;
    height: 50px;
    line-height: 50px;
    border-radius: 50%;
    font-weight: bold;
    background: #333;
    color: #fff;
    text-align: center;
    border-radius: 100%;
    box-shadow: 0 2px 4px 0 rgba(255, 133, 0, 25%);
  }

  .draggable-two {
    position: fixed;
    left: 200px;
    top: 100px;
    width: 50px;
    height: 50px;
    line-height: 50px;
    border-radius: 50%;
    img {
      width: 100%;
      height: 100%;
      pointer-events: none;
    }
  }
}
</style>