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

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

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

1、图片加载性能问题

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

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

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

• 图片比文本更复杂，拖动时浏览器需要 频繁重绘（Repaint）。
• 如果图片是 非矢量图（如 PNG/JPG），重绘成本更高。

解决方案：

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

完整代码：

<template><div class="box"><!-- 左图，文字 --><divv-draggable="{bounds: 'body',}"class="draggable-class">拖动</div><!-- 右图，图片 --><divv-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>