使用 `display: none` 会导致父容器重排，使所有子元素（包括未拖动的卡片）意外消失；应改用 `opacity: 0` 或 `visibility: hidden` 配合 `pointer-events: none` 实现无布局干扰的视觉隐藏。
在拖拽交互中，常见的误区是直接对被拖动元素添加 .invisible { display: none } —— 这看似合理，实则会引发严重布局问题。原因在于：.cards 容器使用了 display: flex，而 display: none 会使元素彻底脱离文档流，导致 Flex 容器重新计算剩余子项的排列。由于事件委托机制和事件目标的传播特性，若
是
✅ 正确解法：使用不影响布局的隐藏方式
推荐两种专业方案：
方案一：opacity: 0 + pointer-events: none（推荐）
既保持元素占位，又消除点击干扰，且动画平滑：
.invisible {
opacity: 0;
pointer-events: none; /* 防止拖拽结束前误触 */
transition: opacity 0.15s ease; /* 可选：增加淡出效果 */
}方案二：visibility: hidden（语义更精准）
完全隐藏但保留空间，且默认不响应事件（无需额外加 pointer-events）：
.invisible {
visibility: hidden;
}⚠️ 注意事项：
- ❌ 避免 display: none 用于拖拽临时隐藏——它破坏 Flex/Grid 布局稳定性；
- ✅ 在 dragstart 中添加类，在 dragend 中移除，确保状态严格配对；
- ? 若仍出现“卡顿感”，检查是否在 drag 或 dragover 中触发了高频重排（如动态修改 left/top），应优先使用 CSS transform 或 will-change: transform 优化；
- ? 补充建议：为提升可访问性，可在 dragstart 时添加 aria-hidden="true"，dragend 时移除。
最终修复后的 JavaScript 保持简洁：
cards.addEventListener('dragstart', (e) => {
e.target.classList.add('invisible');
});
cards.addEventListener('dragend', (e) => {
e.target.classList.remove('invisible');
});这样即可实现：仅被拖动的卡片视觉隐藏，其余卡片位置稳定、交互正常，且无布局抖动或滞后感。
