refactor(V0.2): 拖动交互收紧 —— 仅把手触发 / 缩小把手 / 去多余元素 / 打卡跨组
Docker Build and Push / build-image (push) Successful in 1m3s

- 打卡与列表: 去掉卡片整体长按拖动路径, 只有 ⠿ 把手可拖; 把手缩小
- 列表行去掉跟动的蓝色目标列徽标 (drag-pill), 占位/克隆浮层承担全部反馈
- 打卡支持跨组拖动: 落到其他周期组的目标卡 = 改周期 + 落位一次完成
  (updateHabit period + reorder), 组内排序不变
- 看板: 去掉 ⠿ 把手, 恢复长按拖动
This commit is contained in:
jif2.zhang
2026-10-25 02:19:03 +08:00
parent 5066007d9d
commit 1673cbdb7d
7 changed files with 25 additions and 26 deletions
+4 -4
View File
@@ -62,12 +62,12 @@ export default function useHabitDrag({ onDrop }) {
const el = document.elementFromPoint(x, y)
const rowEl = el?.closest?.('[data-habit-row]')
if (!rowEl) return null
// 只认同一周期组的落点
if (rowEl.dataset.habitPeriod !== st.current.item?.period) return null
const r = rowEl.getBoundingClientRect()
const id = Number(rowEl.dataset.habitId)
if (id === st.current.item.id) return null
return { id, after: y > r.top + r.height / 2 }
// 允许跨组: 落到其他周期组的目标卡上 = 同时改周期 + 落位 (由 onDrop 处理)
const period = rowEl.dataset.habitPeriod
return { id, period, after: y > r.top + r.height / 2 }
}
const onMove = (ev) => {
@@ -89,7 +89,7 @@ export default function useHabitDrag({ onDrop }) {
const s = st.current
if (s.active && s.item) {
lastEnd.current = Date.now()
if (s.over && s.over.id !== s.item.id) onDropRef.current?.(s.item, s.over.id, s.over.after)
if (s.over && s.over.id !== s.item.id) onDropRef.current?.(s.item, s.over.id, s.over.after, s.over.period)
}
cleanup()
}
+1 -4
View File
@@ -7,7 +7,7 @@ import StatusDot from './StatusDot.jsx'
const MAX_SUB = 3
export default function TaskCard({
task, bindDrag, bindDragHandle, onClick, onToggleSub, onToggle, onMore, dragging = false, highlight = false,
task, bindDrag, onClick, onToggleSub, onToggle, onMore, dragging = false, highlight = false,
}) {
const children = task.children || []
const shown = children.slice(0, MAX_SUB)
@@ -20,9 +20,6 @@ export default function TaskCard({
onClick={onClick}
{...(bindDrag ? bindDrag(task) : {})}
>
{bindDragHandle && (
<span className="grip" title="拖动换列" {...bindDragHandle(task)}>⠿</span>
)}
<div className="brow1">
<span className="btitle">{task.title}</span>
<span
+2 -7
View File
@@ -8,7 +8,7 @@ const statusLabel = (s) => (s === 'done' ? '完成' : s === 'doing' ? '执行中
// 复选框 / ⋯ 是独立控件: pointerdown 不冒泡, 不发起拖动,
// 避免长按行后抬手时合成的 click 落在控件上误触状态切换
export default function TaskRow({
task, onToggle, onClick, onMore, bindDrag, bindDragHandle, dragTarget, dragOver, indent = false, children,
task, onToggle, onClick, onMore, bindDrag, bindDragHandle, dragging = false, dragOver, indent = false, children,
}) {
const done = task.status === 'done'
return (
@@ -16,7 +16,7 @@ export default function TaskRow({
<div
className={
`${indent ? 'sub-row' : 'task-row'}${done ? ' done' : ''}`
+ (dragTarget ? ' dragging' : '')
+ (dragging ? ' dragging' : '')
+ (dragOver ? ` dragover ${dragOver.after ? 'after' : 'before'}` : '')
}
data-task-id={indent ? undefined : task.id}
@@ -60,11 +60,6 @@ export default function TaskRow({
</div>
</div>
<div className="task-right">
{dragTarget && (
<span className={`drag-pill${dragTarget.id === task.columnId ? ' cur' : ''}`}>
→ {dragTarget.name}
</span>
)}
<span
className="more"
onClick={(e) => { e.stopPropagation(); onMore?.(task) }}