From c7c059cd637f30084c3e57ed44e579f037c7ff98 Mon Sep 17 00:00:00 2001
From: JSR <pandajsr72@gmail.com>
Date: Thu, 26 Mar 2026 16:37:56 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=E6=94=B9=E4=B8=BADOM=E7=9B=B4=E9=A9=B1?=
 =?UTF-8?q?=E6=8B=96=E6=8B=BD=E8=B7=9F=E9=9A=8F=E5=87=8F=E5=B0=91=E5=8D=A1?=
 =?UTF-8?q?=E9=A1=BF?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/StudentManager.tsx | 38 +++++++++++++++++++++----------
 1 file changed, 26 insertions(+), 12 deletions(-)

diff --git a/src/components/StudentManager.tsx b/src/components/StudentManager.tsx
index 2975947..f9cca94 100644
--- a/src/components/StudentManager.tsx
+++ b/src/components/StudentManager.tsx
@@ -108,9 +108,7 @@ export const StudentManager: React.FC<{ canEdit: boolean }> = ({ canEdit }) => {
   const [pointerDraggingStudentId, setPointerDraggingStudentId] = useState<number | null>(null)
   const [pointerTargetGroup, setPointerTargetGroup] = useState<string | null>(null)
   const [pointerDragStudentName, setPointerDragStudentName] = useState("")
-  const [pointerDragPosition, setPointerDragPosition] = useState<{ x: number; y: number } | null>(
-    null
-  )
+  const pointerDragGhostRef = useRef<HTMLDivElement | null>(null)
   const pointerDragPositionRef = useRef<{ x: number; y: number } | null>(null)
   const pointerDragRafRef = useRef<number | null>(null)
   const draggingStudentIdRef = useRef<number | null>(null)
@@ -510,7 +508,14 @@ export const StudentManager: React.FC<{ canEdit: boolean }> = ({ canEdit }) => {
     setPointerDraggingStudentId(studentId)
     setPointerDragStudentName(studentName)
     pointerDragPositionRef.current = { x: e.clientX, y: e.clientY }
-    setPointerDragPosition({ x: e.clientX, y: e.clientY })
+    requestAnimationFrame(() => {
+      if (!pointerDragPositionRef.current) return
+      const ghost = pointerDragGhostRef.current
+      if (!ghost) return
+      ghost.style.transform = `translate3d(${pointerDragPositionRef.current.x + 14}px, ${
+        pointerDragPositionRef.current.y + 14
+      }px, 0)`
+    })
     setPointerTargetGroup(null)
     e.currentTarget.setPointerCapture(e.pointerId)
     console.debug("[GroupBoard] pointer drag start", {
@@ -526,10 +531,11 @@ export const StudentManager: React.FC<{ canEdit: boolean }> = ({ canEdit }) => {
     pointerDragRafRef.current = requestAnimationFrame(() => {
       pointerDragRafRef.current = null
       if (!pointerDragPositionRef.current) return
-      setPointerDragPosition({
-        x: pointerDragPositionRef.current.x,
-        y: pointerDragPositionRef.current.y,
-      })
+      const ghost = pointerDragGhostRef.current
+      if (!ghost) return
+      ghost.style.transform = `translate3d(${pointerDragPositionRef.current.x + 14}px, ${
+        pointerDragPositionRef.current.y + 14
+      }px, 0)`
     })
   }
 
@@ -570,8 +576,9 @@ export const StudentManager: React.FC<{ canEdit: boolean }> = ({ canEdit }) => {
     }
     setPointerDraggingStudentId(null)
     setPointerDragStudentName("")
-    setPointerDragPosition(null)
     setPointerTargetGroup(null)
+    const ghost = pointerDragGhostRef.current
+    if (ghost) ghost.style.transform = "translate3d(-9999px, -9999px, 0)"
   }
 
   const readFileAsDataUrl = (file: File): Promise<string> => {
@@ -1411,9 +1418,15 @@ export const StudentManager: React.FC<{ canEdit: boolean }> = ({ canEdit }) => {
           draggingStudentIdRef.current = null
           pointerDragSourceGroupRef.current = null
           pointerDragTargetGroupRef.current = null
+          pointerDragPositionRef.current = null
+          if (pointerDragRafRef.current != null) {
+            cancelAnimationFrame(pointerDragRafRef.current)
+            pointerDragRafRef.current = null
+          }
+          const ghost = pointerDragGhostRef.current
+          if (ghost) ghost.style.transform = "translate3d(-9999px, -9999px, 0)"
           setPointerDraggingStudentId(null)
           setPointerDragStudentName("")
-          setPointerDragPosition(null)
           setPointerTargetGroup(null)
         }}
         onOk={handleSaveGroupBoard}
@@ -1530,8 +1543,9 @@ export const StudentManager: React.FC<{ canEdit: boolean }> = ({ canEdit }) => {
             )
           })}
         </div>
-        {pointerDraggingStudentId != null && pointerDragPosition && (
+        {pointerDraggingStudentId != null && (
           <div
+            ref={pointerDragGhostRef}
             style={{
               position: "fixed",
               left: 0,
@@ -1549,7 +1563,7 @@ export const StudentManager: React.FC<{ canEdit: boolean }> = ({ canEdit }) => {
               whiteSpace: "nowrap",
               overflow: "hidden",
               textOverflow: "ellipsis",
-              transform: `translate3d(${pointerDragPosition.x + 14}px, ${pointerDragPosition.y + 14}px, 0)`,
+              transform: "translate3d(-9999px, -9999px, 0)",
               willChange: "transform",
             }}
           >