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;
}
.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;

25
js/script.js
View File

@@ -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;
let newLeft = startLeft + dx;
let newTop = startTop + dy;
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));
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';
overlayEl.style.left = newLeft + 'px';
overlayEl.style.top = newTop + 'px';
}
e.preventDefault();
}