原生看板拖拽排序 · 在线演示

演示了什么：这个 Demo 让你亲眼看到不用 SortableJS 也能做三列看板拖拽：卡片可跨列移动、可在列内排序，移动端手指也能操作。它强调的是拖拽交互的核心骨架，而不是依赖库的配置项。

关键实现：

1. js 里的 pointerdown / pointermove / pointerup 统一处理鼠标和触摸，比 HTML5 DragEvent 更适合移动端，避免部分手机浏览器不触发拖放事件。
2. js 的 placeholder 占位块保留原列表高度，ghost 克隆卡片跟随指针移动，这样视觉上在拖动，布局上仍有稳定插入位置。
3. js 里的 elementFromPoint 配合卡片中线判断插入点，代码不依赖列名；css 的 .ghost{pointer-events:none} 是关键，否则会挡住下方列表命中检测。

动手改一改：

1. 改 css 里的 .placeholder 边框颜色和背景，拖动时会看到投放位置提示变得更强或更弱。
2. 改 js 里 list.insertBefore 前的中线判断，把 /2 改成 /3，观察卡片更早插入到目标卡片上方。