fix: 修复叠加图片选中/失焦交互

css/style.css

@@ -244,6 +244,14 @@ html, body {
     outline-offset: 2px;
 }
 
+.overlay-layer .overlay-image .resize-handle {
+    display: none;
+}
+
+.overlay-layer .overlay-image.selected .resize-handle {
+    display: block;
+}
+
 .overlay-layer .overlay-image .delete-btn {
     position: absolute;
     top: -10px;

js/script.js

@@ -236,21 +236,20 @@
         let isDragging = false;
         let isResizing = false;
         let startX, startY, startLeft, startTop, startWidth, startHeight;
-        let currentScale = 1;
         const minSize = 30;
 
-        // 点击选中
+        // 点击选中（区分点击和拖拽）
         overlayEl.addEventListener('click', (e) => {
             e.stopPropagation();
             selectOverlay(overlayEl);
         });
 
-        // 拖拽移动
+        // 拖拽移动（不选中也可拖动）
         overlayEl.addEventListener('mousedown', handleDragStart);
         overlayEl.addEventListener('touchstart', handleDragStart, { passive: false });
 
         function handleDragStart(e) {
-            if (e.target.classList.contains('delete-btn')) return;
+            if (e.target.classList.contains('delete-btn') || e.target.classList.contains('resize-handle')) return;
 
             const isTouch = e.type === 'touchstart';
             const clientX = isTouch ? e.touches[0].clientX : e.clientX;
@@ -268,8 +267,6 @@
             document.addEventListener('mouseup', handleDragEnd);
             document.addEventListener('touchmove', handleDragMove, { passive: false });
             document.addEventListener('touchend', handleDragEnd);
-
-            e.preventDefault();
         }
 
         function handleDragMove(e) {
@@ -282,15 +279,17 @@
             const dx = clientX - startX;
             const dy = clientY - startY;
 
+            const moveDistance = Math.sqrt(dx * dx + dy * dy);
+            if (moveDistance > 5) {
                 let newLeft = startLeft + dx;
                 let newTop = startTop + dy;
 
-            // 边界限制
                 newLeft = Math.max(-overlayEl.offsetWidth + minSize, Math.min(newLeft, imageContainer.offsetWidth - minSize));
                 newTop = Math.max(-overlayEl.offsetHeight + minSize, Math.min(newTop, imageContainer.offsetHeight - minSize));
 
                 overlayEl.style.left = newLeft + 'px';
                 overlayEl.style.top = newTop + 'px';
+            }
 
             e.preventDefault();
         }