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

在使用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>
相关推荐
细节控菜鸡42 分钟前
【2025最新】ArcGIS for JS 实现随着时间变化而变化的热力图
开发语言·javascript·arcgis
2501_916008891 小时前
Web 前端开发常用工具推荐与团队实践分享
android·前端·ios·小程序·uni-app·iphone·webview
SkylerHu1 小时前
前端代码规范:husky+ lint-staged+pre-commit
前端·代码规范
菜鸟una2 小时前
【微信小程序 + 消息订阅 + 授权】 微信小程序实现消息订阅流程介绍,代码示例(仅前端)
前端·vue.js·微信小程序·小程序·typescript·taro·1024程序员节
Yeats_Liao2 小时前
Go Web 编程快速入门 05 - 表单处理:urlencoded 与 multipart
前端·golang·iphone
飞翔的佩奇2 小时前
【完整源码+数据集+部署教程】【运动的&足球】足球场地区域图像分割系统源码&数据集全套:改进yolo11-RFAConv
前端·python·yolo·计算机视觉·数据集·yolo11·足球场地区域图像分割系统
拉不动的猪2 小时前
h5后台切换检测利用visibilitychange的缺点分析
前端·javascript·面试
桃子不吃李子2 小时前
nextTick的使用
前端·javascript·vue.js
萌新小码农‍2 小时前
SpringBoot+alibaba的easyexcel实现前端使用excel表格批量插入
前端·spring boot·excel
冰暮流星3 小时前
css3新增背景图片样式
前端·css·css3