diff --git a/js/script.js b/js/script.js index 4ba2ee6..994af7e 100644 --- a/js/script.js +++ b/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); - } }); }