原生拖拽看板 · 在线演示

演示了什么：这个 Demo 让你亲眼看到不用 SortableJS 也能完成看板拖拽：卡片可跨列移动、按悬停位置排序，移动端也能用指针事件操作。它把“拖动影子”和“真实 DOM 排序”分开，手感更稳。

关键实现：

1. js 里的 startDrag 创建 ghost 和 placeholder：影子负责视觉跟随，占位块负责列表高度，避免拖动时原卡片撑开两份空间。
2. js 里的 moveDrag 用 elementFromPoint 找当前指针下的 .projects，再用目标卡片中线判断插入前后，比按移动方向判断更不容易抖。
3. css 的 .ghost{will-change:transform} 配合 js 只改 transform，让拖动尽量走合成层——浏览器单独画一层，减少重排压力。

动手改一改：

1. 把 css 里 .ghost 的 rotate(2deg) 改成 rotate(0deg) 或 rotate(8deg)，观察拖拽时的轻重感变化。
2. 把 js 里中线判断的 /2 改成 *.8，你会发现卡片更靠近底部时才插到后面，排序阈值会明显变化。