diff --git a/src/components/task/useRowDrag.js b/src/components/task/useRowDrag.js index 06c368e..f8ad6be 100644 --- a/src/components/task/useRowDrag.js +++ b/src/components/task/useRowDrag.js @@ -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 }) + } } } diff --git a/src/pages/checkin/MergedView.jsx b/src/pages/checkin/MergedView.jsx index f0d4372..4de89c5 100644 --- a/src/pages/checkin/MergedView.jsx +++ b/src/pages/checkin/MergedView.jsx @@ -5,6 +5,7 @@ // - 撤销 / 编辑 / 归档 收进「⋯」底部面板 // - 未来日期只读, 按钮灰显「计划」 import { useCallback, useEffect, useMemo, useState } from 'react' +import { createPortal } from 'react-dom' import { Button, Dialog, DotLoading, Empty, Input, Popup, Selector, Stepper, Toast, } from 'antd-mobile' @@ -363,12 +364,14 @@ export default function MergedView({ date, onDateChange }) { ))} - {/* 跟手浮层: 半透明副本随手指移动, 原位保留虚线占位 */} - {drag.dragItem && ( + {/* 跟手浮层: Portal 挂 body —— 页签滑动容器的 transform 会破坏 + position:fixed 的包含块, 浮层直接渲染在卡片流里会被压在下面 */} + {drag.dragItem && createPortal(
{drag.dragItem.name} -
+ , + document.body, )} {/* 「⋯」操作面板: 撤销 / 编辑 / 归档 */} diff --git a/src/pages/task/ListView.jsx b/src/pages/task/ListView.jsx index 430b6a9..f1e8b55 100644 --- a/src/pages/task/ListView.jsx +++ b/src/pages/task/ListView.jsx @@ -1,10 +1,11 @@ import { useState } from 'react' +import { createPortal } from 'react-dom' import TaskRow from '../../components/task/TaskRow.jsx' import useRowDrag from '../../components/task/useRowDrag.js' // 列表视图 (T-VW-01, T-ST-04/05) // 按看板列分组展示; 子任务缩进 + 折叠展开 -// 换列手势与看板一致: 长按 400ms 行抬起, 左右拖动选列, 松手落列 +// 换列: 行/把手拖动, 跟手浮层, 手指划到哪个分组松手就落到哪 (与看板一致) // (列表只展示有任务的列, 空列需到看板视图拖入) export default function ListView({ tasks, columns, onToggle, onOpen, onMore, onMoveColumn, @@ -34,7 +35,8 @@ export default function ListView({ return (
- {groups.map((g) => (
+ {groups.map((g) => ( +
{g.name} {g.list.length} @@ -74,14 +76,15 @@ export default function ListView({
))} - {/* 跟手浮层: 任务名 + 目标列, 原位保留半透明占位 */} - {drag.drag && ( + {/* 跟手浮层: Portal 挂 body, 任务名 + 手指所在分组 */} + {drag.drag && createPortal(
{drag.drag.task.title} {orderedCols[drag.drag.toIdx] && ( → {orderedCols[drag.drag.toIdx].name} )} -
+
, + document.body, )}
)