전략편집기 수정

frontend/src/utils/paletteDragSession.ts

@@ -53,6 +53,7 @@ let moveRafId: number | null = null;
 let pendingMove: { x: number; y: number } | null = null;
 let unbindActiveDrag: (() => void) | null = null;
 let pendingPointerListeners: (() => void) | null = null;
+let lastDragClientXY: { x: number; y: number } | null = null;
 
 function hasCoarsePointer(): boolean {
   if (typeof window === 'undefined') return false;
@@ -136,6 +137,7 @@ function cleanupDrag() {
   activePointerId = null;
   activeTouchId = null;
   pendingMove = null;
+  lastDragClientXY = null;
   if (moveRafId != null) {
     cancelAnimationFrame(moveRafId);
     moveRafId = null;
@@ -149,17 +151,20 @@ function cleanupDrag() {
 function finishDrag(phase: 'end' | 'cancel', xy: { x: number; y: number }) {
   if (!activePayload) return;
   const payload = activePayload;
-  cleanupDrag();
+  const dropXY = lastDragClientXY ?? xy;
+
   if (phase === 'end') {
     suppressClickUntil = Date.now() + 400;
-    dispatchEnd(xy, payload);
+    dispatchEnd(dropXY, payload);
   } else {
-    emit({ phase: 'cancel', x: xy.x, y: xy.y, payload });
+    emit({ phase: 'cancel', x: dropXY.x, y: dropXY.y, payload });
   }
+  cleanupDrag();
 }
 
 export function notifyPaletteDragMove(clientX: number, clientY: number) {
   if (!activePayload) return;
+  lastDragClientXY = { x: clientX, y: clientY };
   pendingMove = { x: clientX, y: clientY };
   if (moveRafId != null) return;
   moveRafId = requestAnimationFrame(() => {
@@ -212,7 +217,7 @@ function bindActiveDragWindowListeners(pointerId: number) {
       if (!eventMatchesActiveInput(ev)) return;
       finishDrag('end', xy);
     },
-    { preventTouchScroll: true },
+    { preventTouchScroll: true, useCapture: true },
   );
 }
 
@@ -244,6 +249,7 @@ function beginDrag(
   activePayload = payload;
   activePointerId = pointerId;
   activeTouchId = touchId;
+  lastDragClientXY = { x: xy.x, y: xy.y };
   document.body.classList.add('se-palette-drag-active');
 
   bindActiveDragWindowListeners(pointerId);