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

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

src/components/task/useColumnDrag.js

@@ -14,9 +14,32 @@ import { useCallback, useEffect, useRef, useState } from 'react'
 export default function useColumnDrag({ onDrop, scrollSelector = '.board-wrap' } = {}) {
   const [dragTask, setDragTask] = useState(null)   // 拖动中的任务 (视觉态)
   const [overCol, setOverCol] = useState(null)     // 高亮的目标列 id
-  const st = useRef({ timer: null, active: false, startX: 0, startY: 0, task: null, autoScroll: 0, raf: 0 })
+  const st = useRef({ timer: null, active: false, startX: 0, startY: 0, task: null, autoScroll: 0, raf: 0, srcEl: null, ghost: null })
   const lastEnd = useRef(0)                        // 拖动结束时刻
 
+  // onDrop 经 ref 桥接实时闭包 (bind 空依赖 useCallback, 防陈旧)
+  const onDropRef = useRef(onDrop)
+  onDropRef.current = onDrop
+
+  // 跟手浮层: 激活时克隆原卡片挂到 body, 移动时直接改 transform
+  const moveGhost = (x, y) => {
+    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', 'hl')
+    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 stopAutoScroll = () => {
     st.current.autoScroll = 0
     if (st.current.raf) { cancelAnimationFrame(st.current.raf); st.current.raf = 0 }
@@ -25,6 +48,8 @@ export default function useColumnDrag({ onDrop, scrollSelector = '.board-wrap' }
   const cleanup = useCallback(() => {
     if (st.current.timer) { clearTimeout(st.current.timer); st.current.timer = null }
     st.current.active = false
+    st.current.srcEl = null
+    if (st.current.ghost) { st.current.ghost.remove(); st.current.ghost = null }
     stopAutoScroll()
     setDragTask(null)
     setOverCol(null)
@@ -69,6 +94,7 @@ export default function useColumnDrag({ onDrop, scrollSelector = '.board-wrap' }
       return
     }
     ev.preventDefault()
+    moveGhost(ev.clientX, ev.clientY)
     const col = hitColumn(ev.clientX, ev.clientY)
     setOverCol(col)
     autoScroll(document.querySelector(scrollSelector), ev.clientX)
@@ -79,49 +105,76 @@ export default function useColumnDrag({ onDrop, scrollSelector = '.board-wrap' }
     if (s.active) {
       lastEnd.current = Date.now()
       const col = hitColumn(ev.clientX, ev.clientY)
-      if (col && s.task && col !== s.task.columnId) onDrop?.(s.task, col)
+      if (col && s.task && col !== s.task.columnId) onDropRef.current?.(s.task, col)
     }
     cleanup()
   }
 
+  // 指针监听装配 (capture + 非 passive touchmove; instant=true 把手路径
+  // 再挂 touchstart preventDefault, 浏览器完全不接管该触摸)
+  const armListeners = (ev, instant) => {
+    try { ev.currentTarget.setPointerCapture(ev.pointerId) } catch { /* ignore */ }
+    const el = ev.currentTarget
+    const move = (e2) => onPointerMove(e2)
+    const tm = (e2) => { if (st.current.active) e2.preventDefault() }
+    const ts = (e2) => e2.preventDefault()
+    const up = (e2) => { onPointerUp(e2); detach() }
+    const cancel = () => {
+      if (st.current.active) lastEnd.current = Date.now()
+      cleanup()
+      detach()
+    }
+    const detach = () => {
+      el.removeEventListener('pointermove', move)
+      el.removeEventListener('pointerup', up)
+      el.removeEventListener('pointercancel', cancel)
+      el.removeEventListener('touchmove', tm)
+      el.removeEventListener('touchstart', ts)
+    }
+    el.addEventListener('pointermove', move)
+    el.addEventListener('pointerup', up)
+    el.addEventListener('pointercancel', cancel)
+    el.addEventListener('touchmove', tm, { passive: false })
+    if (instant) el.addEventListener('touchstart', ts, { passive: false })
+  }
+
+  const startDrag = (ev, task, instant) => {
+    st.current = {
+      ...st.current, startX: ev.clientX, startY: ev.clientY, task, active: false,
+      srcEl: ev.currentTarget.closest('.bcard'),
+    }
+    const activate = () => {
+      st.current.active = true
+      setDragTask(task)
+      if (navigator.vibrate) navigator.vibrate(15)
+      mountGhost(st.current.startX, st.current.startY)
+    }
+    if (instant) activate()
+    else st.current.timer = setTimeout(activate, 400)
+    armListeners(ev, instant)
+  }
+
   /** 绑定到卡片: 需要卡片元素设置 touch-action: pan-y */
   const bind = useCallback((task) => ({
     onPointerDown: (ev) => {
       if (ev.button !== undefined && ev.button !== 0) return
-      st.current = { ...st.current, startX: ev.clientX, startY: ev.clientY, task, active: false }
-      // 长按计时: 期间移动超容差(用户在滚动)则取消
-      st.current.timer = setTimeout(() => {
-        st.current.active = true
-        setDragTask(task)
-        if (navigator.vibrate) navigator.vibrate(15)
-      }, 400)
-      // 捕获: 后续 move/up/cancel 都派发给该元素, 不丢
-      try { ev.currentTarget.setPointerCapture(ev.pointerId) } catch { /* ignore */ }
-      const el = ev.currentTarget
-      const move = (e2) => onPointerMove(e2)
-      // 激活后拦截触摸滚动: 防纵向分量触发浏览器接管 (pointercancel), 同 useRowDrag
-      const tm = (e2) => { if (st.current.active) e2.preventDefault() }
-      const up = (e2) => { onPointerUp(e2); detach() }
-      const cancel = () => {
-        if (st.current.active) lastEnd.current = Date.now()
-        cleanup()
-        detach()
-      }
-      const detach = () => {
-        el.removeEventListener('pointermove', move)
-        el.removeEventListener('pointerup', up)
-        el.removeEventListener('pointercancel', cancel)
-        el.removeEventListener('touchmove', tm)
-      }
-      el.addEventListener('pointermove', move)
-      el.addEventListener('pointerup', up)
-      el.addEventListener('pointercancel', cancel)
-      el.addEventListener('touchmove', tm, { passive: false })
+      startDrag(ev, task, false)
     },
     // 长按不弹系统菜单 (配合 CSS user-select:none, 防长按变文字选择)
     onContextMenu: (ev) => ev.preventDefault(),
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }), [])
 
-  return { dragTask, overCol, bind, cancel: cleanup, justEnded }
+  /** 绑定到卡片左侧拖动把手: 把手需 touch-action: none, 按下立即拖动 */
+  const bindHandle = useCallback((task) => ({
+    onPointerDown: (ev) => {
+      if (ev.button !== undefined && ev.button !== 0) return
+      ev.stopPropagation() // 不触发卡片自身的长按路径
+      startDrag(ev, task, true)
+    },
+    onContextMenu: (ev) => ev.preventDefault(),
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }), [])
+
+  return { dragTask, overCol, bind, bindHandle, cancel: cleanup, justEnded }
 }