原生 HTML5 drag API 不支持长按触发拖拽，因其瞬时响应导致误触发、移动端失效及交互冲突；需用 mousedown/mousemove/mouseup 手动实现长按判定、视觉反馈、位置计算与 DOM 交换，并特别处理移动端选中拦截、touch 事件预防及松手时实时布局检测。
原生 HTML5 drag API 不支持长按触发拖拽，它只响应鼠标左键按下即拖（dragstart 在 mousedown 后极短时间内自动触发），无法区分“短按点击”和“长按拖拽”。想在九宫格里实现「长按后拖动换位」，必须绕过原生 drag 事件，用 mousedown/mousemove/mouseup 手动模拟。
为什么不能直接用 draggable="true"
浏览器对 draggable="true" 的触发是瞬时的：只要鼠标按下并轻微移动（通常 2–5px），就立即进入拖拽状态，并伴随系统级光标变化、禁用文本选中、强制触发 dragstart。这会导致两个问题：
- 用户想点开某个格子查看详情，结果刚按住就意外拖起来了
- 移动端 Safari 完全不响应
drag事件，长按根本不会触发任何拖拽流程 - 九宫格内元素若含
input、button或可聚焦内容，draggable="true"会干扰其正常交互
怎么手动实现「长按 → 拖拽 → 换位」逻辑
核心是引入一个延迟判定：鼠标按下后计时，超时（如 300ms）且未抬起，才启动拖拽态；期间监听 mousemove 移动位置，松手时计算最近格子并交换 DOM 顺序。
- 给每个九宫格项（如
<div class="grid-item">）绑定mousedown，启动setTimeout计时器 - 一旦超时，设
isDragging = true，记录当前项、移除其pointer-events: none（如有），并添加transform: scale(1.05)视觉反馈 - 全局监听
mousemove，仅当isDragging为真时，更新其left/top值（或用transform: translate()） -
mouseup触发时，遍历所有格子的getBoundingClientRect()，算出鼠标坐标离哪个格子中心最近，调用parent.insertBefore(draggedEl, targetEl)插入到目标位置前 - 务必在
mouseup后清除所有监听器和定时器，避免内存泄漏
移动端长按拖拽必须处理的三个坑
iOS 和 Android 对 touchstart 的长按行为默认会触发「复制菜单」或「缩放」，必须显式拦截：
立即学习“前端免费学习笔记（深入）”；
- 给九宫格容器加
style="-webkit-user-select: none; user-select: none;"，禁用长按选中文本 - 在
touchstart里立刻调用e.preventDefault()，否则 Safari 会弹出菜单并中断后续 touch 流程 - 别依赖
touchmove的位移距离判断是否拖拽——手指轻微抖动就会误触发；改用elapsedTime > 300 && Math.hypot(dx, dy) > 10双条件（时间 + 位移阈值）
真正的难点不在拖动本身，而在于「松手瞬间精准识别目标格子」：DOM 重排后 layout 可能微变，getBoundingClientRect() 必须在 mouseup 同步调用，不能缓存；如果格子用了 CSS Grid 或 flex 自动布局，还得先用 getComputedStyle() 确认当前渲染位置，再算落点。这个环节一卡顿，换位就错位。
