feat(V0.2): 列表拖动修复 + 打卡项组内拖动排序
- 任务列表/看板拖动: 激活后用非 passive touchmove preventDefault 拦截浏览器滚动接管, 修复列表长按抬起后 pointercancel 导致无法真正拖动 - 打卡: 列表按周期分组展示(每天/每周/每月/每年), 长按拖动组内排序(上下落点指示), 新增 POST /checkin/habits/reorder 重写 sortOrder; 新建项排到末尾 - 打卡卡片加 touch-action/user-select 防长按误触; 拖动结束 350ms 内抑制点击余波
This commit is contained in:
@@ -74,6 +74,10 @@ export default function useRowDrag({ columns, onDrop }) {
|
||||
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()
|
||||
@@ -84,10 +88,12 @@ export default function useRowDrag({ columns, onDrop }) {
|
||||
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 })
|
||||
},
|
||||
// 长按不弹系统菜单 (配合 CSS user-select:none, 防长按变文字选择)
|
||||
onContextMenu: (ev) => ev.preventDefault(),
|
||||
|
||||
Reference in New Issue
Block a user