fix(V0.2): 浮层 Portal 修复被遮挡 + 列表落点改为手指所在分组
Docker Build and Push / build-image (push) Successful in 1m1s
Docker Build and Push / build-image (push) Successful in 1m1s
- 打卡/任务浮层 createPortal 挂 document.body: 页签滑动容器 transform 破坏 position:fixed 包含块, 浮层被压进卡片流只能看到边缘 - 任务列表落点: 弃用 80px/列步进换算 (视觉位置与换算不一致, 落点随机), 改为 elementFromPoint 命中 [data-column-id] 分组 —— 手指在哪个分组 松手就落到哪, 与看板行为一致; 划出分组时保持上一目标
This commit is contained in:
@@ -1,14 +1,13 @@
|
||||
import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
|
||||
|
||||
// 列表视图卡片拖动换列 (2026-10-24, 替代「长按 → ActionSheet」:
|
||||
// 旧方案长按与复选框/行点击互相误触, 且菜单弹出时手指还按在屏上, 体验割裂)
|
||||
// 手势与看板一致: 长按 400ms 行原位抬起(震动), 之后左右拖动;
|
||||
// 水平位移按 80px/列 步进切换目标列 (顺序同列表分组), 行尾实时显示
|
||||
// 目标列名徽标, 松手落到目标列 (≠当前列才提交)。
|
||||
// touch-action: pan-y —— 横向位移归拖动, 纵向仍归列表滚动;
|
||||
// 激活后浏览器若接管纵向滚动 (pointercancel) 只放弃不提交。
|
||||
// 列表视图卡片拖动换列
|
||||
// 触发: 行长按 400ms, 或按住行尾 ⠿ 把手 (touch-action:none, 立即激活,
|
||||
// 把手不受浏览器滚动接管影响, 是可靠入口)
|
||||
// 拖动: 跟手浮层 (消费方渲染), 手指划到哪个分组 ([data-column-id])
|
||||
// 即目标列, 松手落到目标列 (≠当前列才提交)
|
||||
// touch-action: pan-y + 激活后非 passive touchmove preventDefault 尽力
|
||||
// 拦截滚动接管; pointercancel 只放弃不提交
|
||||
// 注: 列表只展示有任务的列, 空列拖不进去 (用看板视图可拖空列)。
|
||||
const STEP = 80
|
||||
|
||||
export default function useRowDrag({ columns, onDrop }) {
|
||||
// { task, fromIdx, toIdx }: 拖动中的行 + 当前目标列下标 (徽标渲染)
|
||||
@@ -49,10 +48,16 @@ export default function useRowDrag({ columns, onDrop }) {
|
||||
}
|
||||
ev.preventDefault()
|
||||
moveGhost(ev.clientX, ev.clientY)
|
||||
const to = Math.max(0, Math.min(ordered.length - 1, s.fromIdx + Math.round((ev.clientX - s.startX) / STEP)))
|
||||
if (to !== s.toIdx) {
|
||||
s.toIdx = to
|
||||
setDrag({ task: s.task, fromIdx: s.fromIdx, toIdx: to })
|
||||
// 手指划到哪个分组([data-column-id])就是目标列 —— 与视觉一致, 松手即落。
|
||||
// 划出所有分组 (如页头/空白) 时保持上一个目标不变。
|
||||
const colEl = document.elementFromPoint(ev.clientX, ev.clientY)?.closest?.('[data-column-id]')
|
||||
const colId = colEl ? Number(colEl.dataset.columnId) : null
|
||||
if (colId != null) {
|
||||
const to = ordered.findIndex((c) => c.id === colId)
|
||||
if (to >= 0 && to !== s.toIdx) {
|
||||
s.toIdx = to
|
||||
setDrag({ task: s.task, fromIdx: s.fromIdx, toIdx: to })
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user