看板卡片拖放

要解决的问题

原生 HTML5 拖拽 API 只抛出一次 drop 事件，卡片在松手前不会跟着指针移动，也没有边界限制、惯性和坐标回写。而完整的 DnD 框架动辄几十 kB，只为了让看板卡片换一列，代价偏高。这个技能把 interact.js 的拖拽能力封装成一条可落地的链路：卡片节点 → interact().draggable() → 松手回写坐标或列，适合 Demo 验证和轻量自由摆放场景。

技能如何工作

核心依赖只有 interactjs 一项。每张卡片挂载时注册为 draggable，onEnd 回调中把新阶段或坐标交回业务层，由业务层决定换列还是仅保存位置。组件卸载时调用 destroy，对应 interact 实例的 unset()，避免监听器残留。

关键步骤：

• 每张卡片独立挂载，拖拽结束必须回调业务逻辑（换列或存坐标），技能本身不托管业务状态。
• 卸载路径与挂载路径对称，在 onBeforeUnmount 中调 destroy。
• 实现要点处用 小四原创 标注，便于回溯原创写法。

适用边界与注意点

它只处理单端拖拽，不含协同看板与多人冲突合并，不要直接用于在线协作。两个高频坑：一是与 AutoAnimate 叠用时位置错乱，需先排查动画层；二是忘记 unset 造成重复绑定，表现为同一张卡片响应两次拖拽。与原生滚动共存时，用 ignoreFrom 排除卡片内的可滚动区域即可。