feat(V0.2): 克隆卡片跟手浮层 + 列表组内排序 + 把手统一移到最左

- 浮层改为激活时克隆原卡片 (DOM clone, 淡化+投影) 挂 body 顶层,
  移动直接改 transform —— 替代蓝色信息条, 所见即所拖
- 任务列表支持组内排序: 拖到本组某行上/下半显示插入指示, 松手提交
  POST /projects/:id/tasks/reorder (顶层任务按展平顺序重写 sortOrder);
  拖到其他分组仍为换列
- ⠿ 把手统一移到卡片最左: 打卡 / 列表任务行 / 看板卡片 (看板新增把手
  即按即拖路径, 与列表同款 touchstart preventDefault 双保险)
- useColumnDrag onDrop 经 ref 桥接防陈旧闭包

src/components/checkin/useHabitDrag.js

@@ -1,40 +1,54 @@
 import { useCallback, useEffect, useRef, useState } from 'react'
 
 // 打卡项组内拖动排序 (MergedView 分组列表)
-//   两条触发路径, 状态机共用:
-//   1. 把手 (bindHandle, 推荐): 卡片右侧 ⠿ 把手 touch-action:none,
-//      指针按下立即激活 —— 浏览器按规范完全不接管该触摸, 指针流不会被
-//      滚动抢占取消, 在 Android WebView 上 100% 可靠;
-//   2. 长按 (bind): 长按 400ms 原位抬起(震动)后拖动。pan-y 下列表一旦
-//      可滚动, 手指纵向抖动即触发浏览器滚动接管 (pointercancel), 手势
-//      被取消 —— 该路径在整页可滚的场景不可靠, 仅作补充入口。
-//   拖动中 elementFromPoint 命中同组 [data-habit-row] 作为落点 (data-habit-period
-//   必须与拖动项一致, 即只在 每天/每周/每月 组内排序), 按指针在目标卡
-//   上半/下半决定插到其前/后, 松手提交。
-//   激活后用非 passive touchmove preventDefault 尽力拦截滚动接管。
+//   触发路径:
+//   1. 把手 (bindHandle, 推荐): 卡片左侧 ⠿ 把手 touch-action:none +
+//      非 passive touchstart preventDefault —— 浏览器按规范完全不接管该
+//      触摸, 指针流不会被滚动抢占取消, Android WebView 上可靠;
+//   2. 长按 (bind): 长按 400ms 激活。pan-y 下列表可滚时手指纵向抖动会
+//      触发滚动接管 (pointercancel), 仅作补充入口。
+//   拖动: 激活时克隆原卡片作为跟手浮层 (淡化), 原位保留虚线占位;
+//   elementFromPoint 命中同组 [data-habit-row] 作为落点 (data-habit-period
+//   必须一致, 即只在 每天/每周/每月 组内排序), 按指针在目标卡上半/下半
+//   决定插到其前/后, 松手提交。
 export default function useHabitDrag({ onDrop }) {
   const [dragItem, setDragItem] = useState(null)       // 拖动中的打卡项 (视觉态)
   const [over, setOver] = useState(null)               // { id, after } 落点
-  const st = useRef({ timer: null, active: false, startX: 0, startY: 0, item: null, over: null })
+  const st = useRef({ timer: null, active: false, startX: 0, startY: 0, item: null, over: null, srcEl: null, ghost: null })
   const lastEnd = useRef(0)
 
   // onDrop 取"最新一次渲染"的闭包: bind/bindHandle 是空依赖 useCallback,
   // 若直接捕获 onDrop, 会固化首次渲染(数据未加载, groups=[])的落位函数,
-  // 松手时静默早退 —— 顺序永远不变。用 ref 桥接到实时实现。
+  // 松手时静默早退。用 ref 桥接到实时实现。
   const onDropRef = useRef(onDrop)
   onDropRef.current = onDrop
 
-  // 跟手浮层: 消费方渲染 <div ref={ghostRef}>, 拖动时 hook 直接改
-  // transform (绕过 React 重渲染, 保证跟手流畅)
-  const ghostRef = useRef(null)
+  // 跟手浮层: 激活时克隆原卡片挂到 body (脱离页签滑动容器的 transform),
+  // 移动时直接改 transform, 不经 React 渲染
   const moveGhost = (x, y) => {
-    if (ghostRef.current) ghostRef.current.style.transform = `translate(${x}px, ${y}px) translate(-50%, -110%)`
+    const g = st.current.ghost
+    if (g) g.style.transform = `translate(${x}px, ${y}px) translate(-50%, -60%)`
+  }
+  const mountGhost = (x, y) => {
+    const src = st.current.srcEl
+    if (!src) return
+    const clone = src.cloneNode(true)
+    clone.classList.remove('dragging', 'dragover', 'after', 'before')
+    clone.style.width = `${src.offsetWidth}px`
+    const g = document.createElement('div')
+    g.className = 'drag-ghost'
+    g.appendChild(clone)
+    document.body.appendChild(g)
+    st.current.ghost = g
+    moveGhost(x, y)
   }
 
   const cleanup = useCallback(() => {
     if (st.current.timer) { clearTimeout(st.current.timer); st.current.timer = null }
     st.current.active = false
     st.current.over = null
+    st.current.srcEl = null
+    if (st.current.ghost) { st.current.ghost.remove(); st.current.ghost = null }
     setDragItem(null)
     setOver(null)
   }, [])
@@ -80,10 +94,7 @@ export default function useHabitDrag({ onDrop }) {
     cleanup()
   }
 
-  // 指针监听装配: instant=true 时按下即激活 (把手路径), 否则长按 400ms 激活。
-  // 把手路径额外挂非 passive touchstart preventDefault —— 规范上这会禁止
-  // 浏览器对"整个触摸"的一切默认处理 (含滚动), 比 touch-action:none 更强,
-  // 双保险防滚动抢占取消指针流。
+  // 指针监听装配: instant=true 时按下即激活 (把手路径), 否则长按 400ms 激活
   const armListeners = (ev, instant, item) => {
     try { ev.currentTarget.setPointerCapture(ev.pointerId) } catch { /* ignore */ }
     const el = ev.currentTarget
@@ -109,26 +120,24 @@ export default function useHabitDrag({ onDrop }) {
     el.addEventListener('touchmove', tm, { passive: false })
     if (instant) el.addEventListener('touchstart', ts, { passive: false })
 
-    if (instant) {
+    const activate = () => {
       st.current.active = true
       setDragItem(item)
-      moveGhost(st.current.startX, st.current.startY)
+      mountGhost(st.current.startX, st.current.startY)
       if (navigator.vibrate) navigator.vibrate(15)
-    } else {
-      st.current.timer = setTimeout(() => {
-        st.current.active = true
-        setDragItem(item)
-        moveGhost(st.current.startX, st.current.startY)
-        if (navigator.vibrate) navigator.vibrate(15)
-      }, 400)
     }
+    if (instant) activate()
+    else st.current.timer = setTimeout(activate, 400)
   }
 
   /** 绑定到卡片: 卡片需 touch-action: pan-y (长按路径) */
   const bind = useCallback((item) => ({
     onPointerDown: (ev) => {
       if (ev.button !== undefined && ev.button !== 0) return
-      st.current = { ...st.current, startX: ev.clientX, startY: ev.clientY, item, active: false, over: null }
+      st.current = {
+        ...st.current, startX: ev.clientX, startY: ev.clientY, item, active: false, over: null,
+        srcEl: ev.currentTarget.closest('[data-habit-row]'),
+      }
       armListeners(ev, false, item)
     },
     onContextMenu: (ev) => ev.preventDefault(),
@@ -140,12 +149,15 @@ export default function useHabitDrag({ onDrop }) {
     onPointerDown: (ev) => {
       if (ev.button !== undefined && ev.button !== 0) return
       ev.stopPropagation() // 不触发卡片自身的长按路径
-      st.current = { ...st.current, startX: ev.clientX, startY: ev.clientY, item, active: false, over: null }
+      st.current = {
+        ...st.current, startX: ev.clientX, startY: ev.clientY, item, active: false, over: null,
+        srcEl: ev.currentTarget.closest('[data-habit-row]'),
+      }
       armListeners(ev, true, item)
     },
     onContextMenu: (ev) => ev.preventDefault(),
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }), [])
 
-  return { dragItem, over, bind, bindHandle, ghostRef, cancel: cleanup, justEnded }
+  return { dragItem, over, bind, bindHandle, cancel: cleanup, justEnded }
 }