拖拽时通过dragstart设opacity为0.5–0.7、dragend还原原始值，并禁用transition避免闪烁；推荐配合缩放或阴影增强反馈，避免仅用透明度影响内容识别。
拖拽时给元素加透明度，核心是利用 dragstart 和 dragend（或 drop）事件控制样式变化，让视觉反馈清晰、不干扰内容识别。
拖拽开始时降低透明度
在 dragstart 事件中直接修改元素的 opacity，是最常用且兼容性好的方式：
- 用
e.target.style.opacity = "0.6"立即生效，无需额外 CSS 类 - 推荐值范围为 0.5–0.7：太低（如 0.2）会让内容难以辨认；太高（如 0.9）则缺乏拖拽状态提示
- 若元素本身有 transition 动画，建议临时禁用：
e.target.style.transition = "none"，避免拖拽瞬间出现闪烁或延迟
拖拽结束时恢复原始透明度
必须在 dragend 或 drop 事件中还原，否则元素会一直保持半透明：
- 最稳妥做法是提前缓存原始 opacity 值：
const originalOpacity = e.target.style.opacity || getComputedStyle(e.target).opacity; - 在
dragend中执行e.target.style.opacity = originalOpacity; - 如果使用 Vue 或 React 等框架，优先通过响应式数据（如
:style="{ opacity: isDragging ? 0.6 : 1 }"）控制，避免直接操作 DOM 样式
注意与其他视觉反馈配合
透明度只是拖拽反馈的一部分，单独使用容易削弱可识别性：
- 搭配轻微缩放（
transform: scale(1.02)）或柔和阴影（box-shadow: 0 4px 12px rgba(0,0,0,0.15)），能强化“正在被拖动”的感知 - 避免对图标、小文字卡片等信息密度高的元素仅靠透明度区分——可同时弱化次要区域（如操作按钮），保留标题/主图清晰可见
- 不要用
visibility: hidden或display: none替代透明度，它们会破坏拖拽坐标计算和占位布局
透明度调整看似简单，但关键在于及时还原、适度取值、协同其他视觉信号。做到这三点，用户就能自然理解“什么在动、动到哪、松手后会发生什么”。
