refactor(V0.2): 拖动交互收紧 —— 仅把手触发 / 缩小把手 / 去多余元素 / 打卡跨组
Docker Build and Push / build-image (push) Successful in 1m3s
Docker Build and Push / build-image (push) Successful in 1m3s
- 打卡与列表: 去掉卡片整体长按拖动路径, 只有 ⠿ 把手可拖; 把手缩小 - 列表行去掉跟动的蓝色目标列徽标 (drag-pill), 占位/克隆浮层承担全部反馈 - 打卡支持跨组拖动: 落到其他周期组的目标卡 = 改周期 + 落位一次完成 (updateHabit period + reorder), 组内排序不变 - 看板: 去掉 ⠿ 把手, 恢复长按拖动
This commit is contained in:
@@ -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()
|
||||
}
|
||||
|
||||
@@ -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
|
||||
|
||||
@@ -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) }}
|
||||
|
||||
Reference in New Issue
Block a user