WeWork/invitation-maker
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
Zhukj
2026-04-17 13:59:58 +08:00
parent f746b8089f
commit 8255a1c426
2 changed files with 20 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
css/style.css
View File

@@ -244,6 +244,14 @@ html, body {
outline-offset: 2px; 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 { .overlay-layer .overlay-image .delete-btn {
position: absolute; position: absolute;
top: -10px; top: -10px;

25
js/script.js
View File

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