拖拽阴影需区分视觉反馈与放置提示：拖拽中用is-dragging类配合opacity、scale和box-shadow实现克制区隔；替换默认拖影须用setdragimage()配canvas；目标区域用dragenter/dragover加drop-target-active类触发内/外阴影或drop-shadow；表格阴影需处理border-collapse、overflow及背景色。
给拖拽元素加阴影效果，核心在于区分两种不同场景：一种是拖拽过程中用户看到的“拖拽视觉反馈”，另一种是拖拽目标区域（如列表、容器）上显示的“放置提示阴影”。两者实现逻辑、技术手段和设计目标完全不同，不能混用。
拖拽时元素自身的视觉反馈阴影
这不是真正意义上的 CSS box-shadow，而是让用户看清“正在拖什么”的即时状态表达。重点不是加阴影，而是建立清晰、克制的视觉区隔：
- 在
dragstart事件中动态添加 CSS 类（如is-dragging），配合opacity: 0.75+transform: scale(1.01)+box-shadow: 0 6px 16px rgba(0,0,0,0.12) - 避免纯黑边框或高饱和遮罩——会掩盖图标、小文字或色彩信息
- 若使用 Vue.Draggable，优先配置
dragClass而非手动监听事件
自定义拖拽时跟随鼠标的“虚拟阴影图”
浏览器默认截取元素快照作为拖拽图像，但这个截图无法用 CSS 修改。要彻底替换它，必须用 dataTransfer.setDragImage()：
- 准备一个已挂载 DOM 的
<canvas></canvas>或<img>（哪怕display: none），确保内容已绘制完成或图片已加载 - 在
dragstart中同步调用：e.dataTransfer.setDragImage(canvas, canvas.width / 2, canvas.height / 2)，实现居中跟随 - Safari 对 SVG 或复杂布局支持弱，建议 fallback 到带图标的
<canvas></canvas>绘制方案 - 切勿在
dragstart中写e.preventDefault()，否则拖拽中断
拖拽悬停目标区域的放置阴影提示
这是告诉用户“松手后会落在哪里”的关键反馈，通常作用于容器或列表项：
- 监听
dragenter和dragover事件，在目标元素上添加drop-target-active类 - 该类可启用
box-shadow: inset 0 0 0 2px #4096ff（内阴影）或底部外阴影 + 背景色微调 - 配合
transition: box-shadow 0.2s ease实现平滑入场，避免突兀闪烁 - 若目标是不规则形状（如带圆角、镂空的卡片），改用
filter: drop-shadow(...)，它能贴合真实像素边缘
表格或复杂布局中的阴影适配要点
给 <table> 加阴影容易失效，常见原因和解法：
<ul>
<li>
<code>border-collapse: collapse 会裁掉 border-radius，导致 box-shadow 圆角不显；需搭配 overflow: hidden 才生效
overflow: hidden 或滚动容器，可能直接剪掉阴影；检查层叠上下文与裁剪边界<table> 显式设置 <code>background-color（哪怕是 #fff），否则阴影对比度不足
<td> 独立有阴影？关掉 <code>border-collapse，改用 border-spacing: 8px 留出间隙
