使用 `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');
});

这样即可实现：仅被拖动的卡片视觉隐藏，其余卡片位置稳定、交互正常，且无布局抖动或滞后感。