fix(V0.2): 拖动可靠性重做 —— 把手入口 + 打卡排序接入实际渲染视图
Docker Build and Push / build-image (push) Successful in 1m1s
Docker Build and Push / build-image (push) Successful in 1m1s
问题定位: - 打卡页实际渲染的是 MergedView (CheckinPage 路由), 上次改的 HabitView 是未使用的旧组件, 打包时被 tree-shake, 线上自然无任何效果 - 任务列表长按抬起后一动即脱手: touch-action:pan-y 下手指出现纵向分量, WebView/渲染器直接把触摸判给滚动并 pointercancel, touchmove preventDefault 拦不住已决定的滚动 (看板可用只因该模式下页面无纵向可滚祖先) 修复: - 新增 ⠿ 拖动把手 (touch-action:none): 浏览器按规范完全不接管该触摸, 按下立即拖动, CDP 触摸仿真验证: 垂直拖动穿过可滚列表正常落点, 跨组(每天/每周/每月)正确拒绝; 任务行把手拖动换列, 打卡卡片把手组内排序 - useRowDrag/useHabitDrag 抽出 armListeners, 新增 bindHandle 立即激活路径 - MergedView: 组内排序改按 sortOrder (服务端已返回), 拖动落位乐观更新 + POST /checkin/habits/reorder, 失败回滚; 打卡点击加拖动余波保护 - 长按路径保留为补充入口 (不可滚场景仍可用)
This commit is contained in:
@@ -59,7 +59,31 @@ export default function useRowDrag({ columns, onDrop }) {
|
||||
cleanup()
|
||||
}
|
||||
|
||||
/** 绑定到列表行: 行元素需设置 touch-action: pan-y */
|
||||
// 指针监听装配 (capture + 非 passive touchmove: 激活后尽力拦截滚动接管)
|
||||
const armListeners = (ev) => {
|
||||
try { ev.currentTarget.setPointerCapture(ev.pointerId) } catch { /* ignore */ }
|
||||
const el = ev.currentTarget
|
||||
const move = (e2) => onMove(e2)
|
||||
const tm = (e2) => { if (st.current.active) e2.preventDefault() }
|
||||
const up = () => { onUp(); detach() }
|
||||
const cancel = () => {
|
||||
if (st.current.active) lastEnd.current = Date.now()
|
||||
cleanup()
|
||||
detach()
|
||||
}
|
||||
const detach = () => {
|
||||
el.removeEventListener('pointermove', move)
|
||||
el.removeEventListener('pointerup', up)
|
||||
el.removeEventListener('pointercancel', cancel)
|
||||
el.removeEventListener('touchmove', tm)
|
||||
}
|
||||
el.addEventListener('pointermove', move)
|
||||
el.addEventListener('pointerup', up)
|
||||
el.addEventListener('pointercancel', cancel)
|
||||
el.addEventListener('touchmove', tm, { passive: false })
|
||||
}
|
||||
|
||||
/** 绑定到列表行: 行元素需设置 touch-action: pan-y (长按路径, 可滚场景不可靠) */
|
||||
const bind = useCallback((task) => ({
|
||||
onPointerDown: (ev) => {
|
||||
if (ev.button !== undefined && ev.button !== 0) return
|
||||
@@ -71,34 +95,31 @@ export default function useRowDrag({ columns, onDrop }) {
|
||||
if (navigator.vibrate) navigator.vibrate(15)
|
||||
setDrag({ task, fromIdx, toIdx: fromIdx })
|
||||
}, 400)
|
||||
try { ev.currentTarget.setPointerCapture(ev.pointerId) } catch { /* ignore */ }
|
||||
const el = ev.currentTarget
|
||||
const move = (e2) => onMove(e2)
|
||||
// 激活后拦截触摸滚动: pan-y 下纵向分量稍大浏览器即接管手势并派发
|
||||
// pointercancel (列表是整页长滚动容器, 必现), 非 passive touchmove
|
||||
// preventDefault 才能真正拦住, 拖动期间指针事件得以持续派发
|
||||
const tm = (e2) => { if (st.current.active) e2.preventDefault() }
|
||||
const up = () => { onUp(); detach() }
|
||||
const cancel = () => {
|
||||
if (st.current.active) lastEnd.current = Date.now()
|
||||
cleanup()
|
||||
detach()
|
||||
}
|
||||
const detach = () => {
|
||||
el.removeEventListener('pointermove', move)
|
||||
el.removeEventListener('pointerup', up)
|
||||
el.removeEventListener('pointercancel', cancel)
|
||||
el.removeEventListener('touchmove', tm)
|
||||
}
|
||||
el.addEventListener('pointermove', move)
|
||||
el.addEventListener('pointerup', up)
|
||||
el.addEventListener('pointercancel', cancel)
|
||||
el.addEventListener('touchmove', tm, { passive: false })
|
||||
armListeners(ev)
|
||||
},
|
||||
// 长按不弹系统菜单 (配合 CSS user-select:none, 防长按变文字选择)
|
||||
onContextMenu: (ev) => ev.preventDefault(),
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
}), [ordered, onDrop])
|
||||
|
||||
return { drag, bind, cancel: cleanup, justEnded }
|
||||
/** 绑定到行尾拖动把手: 把手需 touch-action: none, 按下立即拖动。
|
||||
* pan-y 下整页可滚时浏览器滚动接管会取消指针流 (Android WebView 必现),
|
||||
* 把手路径浏览器完全不接管, 是可靠入口。 */
|
||||
const bindHandle = useCallback((task) => ({
|
||||
onPointerDown: (ev) => {
|
||||
if (ev.button !== undefined && ev.button !== 0) return
|
||||
const fromIdx = ordered.findIndex((c) => c.id === task.columnId)
|
||||
if (fromIdx < 0) return
|
||||
ev.stopPropagation() // 不触发行自身的长按路径
|
||||
st.current = { ...st.current, startX: ev.clientX, startY: ev.clientY, task, fromIdx, toIdx: fromIdx, active: false }
|
||||
st.current.active = true
|
||||
if (navigator.vibrate) navigator.vibrate(15)
|
||||
setDrag({ task, fromIdx, toIdx: fromIdx })
|
||||
armListeners(ev)
|
||||
},
|
||||
onContextMenu: (ev) => ev.preventDefault(),
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
}), [ordered, onDrop])
|
||||
|
||||
return { drag, bind, bindHandle, cancel: cleanup, justEnded }
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user