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>
相关推荐
闲蛋小超人笑嘻嘻9 分钟前
前端面试十四之webpack和vite有什么区别
前端·webpack·node.js
rggrgerj1 小时前
Vue3 组件完全指南代码
前端·javascript·vue.js
golang学习记2 小时前
从0死磕全栈之Next.js App Router动态路由详解:从入门到实战
前端
huangql5202 小时前
基于前端+Node.js 的 Markdown 笔记 PDF 导出系统完整实战
前端·笔记·node.js
在逃的吗喽2 小时前
Vue3新变化
前端·javascript·vue.js
yqwang_cn3 小时前
打造优雅的用户体验:自定义jQuery工具提示插件开发全解析
前端·jquery·ux
小Tomkk3 小时前
AI 提效:利用 AI 从前端 快速转型为UI/UX设计师和产品
前端·人工智能·ui
Demoncode_y3 小时前
Vue3中基于路由的动态递归菜单组件实现
前端·javascript·vue.js·学习·递归·菜单组件
杨超越luckly3 小时前
HTML应用指南:利用POST请求获取全国中国工商农业银行网点位置信息
大数据·前端·html·数据可视化·银行网点
Never_Satisfied3 小时前
在JavaScript / HTML中,浏览器提示 “Refused to execute inline event handler” 错误
开发语言·javascript·html