使用 `display: none` 会导致父容器重排，使所有子元素（包括未拖动的卡片）意外消失；应改用 `opacity: 0` 或 `visibility: hidden` 配合 `pointer-events: none` 实现无布局干扰的视觉隐藏。
在拖拽交互中，常见的误区是直接对被拖动元素添加 .invisible { display: none } —— 这看似合理，实则会引发严重布局问题。原因在于：.cards 容器使用了 display: flex，而 display: none 会使元素彻底脱离文档流，导致 Flex 容器重新计算剩余子项的排列。由于事件委托机制和事件目标的传播特性，若 <p class="card"> 是 <section class="cards"> 的直接子元素，event.target 确实指向该卡片；但一旦它被设为 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;
}⚠️ 注意事项：
Java Maven 项目审查工作流的通用输入处理。当 Java Maven 项目以 ZIP压缩包或 GitLab 仓库 URL 形式提供且需要...时使用。
- ❌ 避免 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');
});这样即可实现：仅被拖动的卡片视觉隐藏，其余卡片位置稳定、交互正常，且无布局抖动或滞后感。
