refactor(drag): 限制边界不强制吸附

js/script.js

@@ -458,15 +458,13 @@
             let newLeft = startLeft + dx;
             let newTop = startTop + dy;
 
-            // 使用吸附功能
+            // 不启用吸附，只限制边界，但显示辅助线
-            const snapped = getSnapPosition(overlayEl, newLeft, newTop);
+            const snapped = getSnapPosition(overlayEl, newLeft, newTop, false);
             newLeft = snapped.left;
             newTop = snapped.top;
-
+            
-            // 显示对齐辅助线（网格线已在 getSnapPosition 中显示）
+            // 显示对齐辅助线
-            if (snapped.showGuide) {
+            showAlignmentGuides(overlayEl);
-                showAlignmentGuides(overlayEl);
-            }
 
             overlayEl.style.left = newLeft + 'px';
             overlayEl.style.top = newTop + 'px';
@@ -993,15 +991,13 @@
                 const newLeft = startLeft + dx;
                 const newTop = startTop + dy;
 
-                // 检测对齐并吸附
+                // 不启用吸附，只限制边界，但显示辅助线
-                const snapped = getSnapPosition(element, newLeft, newTop);
+                const snapped = getSnapPosition(element, newLeft, newTop, false);
                 element.style.left = snapped.left + 'px';
                 element.style.top = snapped.top + 'px';
-
+                
-                // 显示对齐辅助线（网格线已在 getSnapPosition 中显示）
+                // 显示对齐辅助线
-                if (snapped.showGuide) {
+                showAlignmentGuides(element);
-                    showAlignmentGuides(element);
-                }
             }
 
             // 阻止事件冒泡，避免触发图片滑动
@@ -1194,8 +1190,8 @@
         }
     }
 
-    // 获取吸附后的位置
+    // 获取吸附后的位置（可选吸附，不强制）
-    function getSnapPosition(draggedEl, newLeft, newTop) {
+    function getSnapPosition(draggedEl, newLeft, newTop, enableSnap = false) {
         const container = imageContainer;
         const containerRect = container.getBoundingClientRect();
 
@@ -1216,11 +1212,21 @@
         const cCenterX = cWidth / 2;
         const cCenterY = cHeight / 2;
 
-        const threshold = 1;
+        // 默认返回原始位置（不吸附）
         let snapLeft = newLeft;
         let snapTop = newTop;
         let showGuide = false;
 
+        // 如果不启用吸附，只限制边界并返回
+        if (!enableSnap) {
+            // 边界限制
+            snapLeft = Math.max(0, Math.min(snapLeft, cWidth - elWidth));
+            snapTop = Math.max(0, Math.min(snapTop, cHeight - elHeight));
+            return { left: snapLeft, top: snapTop, showGuide };
+        }
+
+        const threshold = 5;
+
         // 显示网格线
         if (gridLines) {
             gridLines.classList.add('visible');
@@ -1384,7 +1390,7 @@
             }
         }
 
-        // 应用吸附
+        // 应用吸附（仅在启用吸附时）
         if (snapX && snapXPos !== null) {
             snapLeft = snapXPos;
             showGuide = true;
@@ -1780,15 +1786,9 @@
                     return;
             }
 
-            // 应用新位置
+            // 应用新位置（不启用吸附）
             targetEl.style.left = currentLeft + 'px';
             targetEl.style.top = currentTop + 'px';
-
-            // 显示对齐辅助线（网格线已在 getSnapPosition 中显示）
-            const snapped = getSnapPosition(targetEl, currentLeft, currentTop);
-            if (snapped.showGuide) {
-                showAlignmentGuides(targetEl);
-            }
         });
     }