調整 div 的大小而不改變邊的 position

Question

我制作了一個帶有可用於調整其大小的句柄的 div。 當 div 的旋轉為 0 度時，這些效果很好。 但是當旋轉角度發生變化並且我嘗試從一側調整 div 的大小時，另一側的 position 會發生變化。 當我嘗試從一個手柄調整它的大小時，我想保持 position 固定在 rest 的邊上。 這是我的代碼：幫助我應該在其中進行哪些類型的更改。

 const resizableDiv = document.querySelector('#resizable-div'); const handles = document.querySelectorAll('.handle'); let isResizing = false; let currentHandle = null; let originalWidth = 0; let originalHeight = 0; let originalX = 0; let originalY = 0; let currentX = 0; let currentY = 0; handles.forEach(handle => { handle.addEventListener('mousedown', e => { isResizing = true; currentHandle = handle; originalWidth = resizableDiv.offsetWidth; originalHeight = resizableDiv.offsetHeight; originalX = resizableDiv.offsetLeft; originalY = resizableDiv.offsetTop; currentX = e.pageX; currentY = e.pageY; }); }); document.addEventListener('mouseup', () => { isResizing = false; }); document.addEventListener('mousemove', e => { if (;isResizing) return. let deltaX = e;pageX - currentX. let deltaY = e;pageY - currentY. if (currentHandle.classList.contains('handle-n')) { resizableDiv.style;height = originalHeight - deltaY + 'px'. resizableDiv.style;top = originalY + deltaY + 'px'. } else if (currentHandle.classList.contains('handle-e')) { resizableDiv.style;width = originalWidth + deltaX + 'px'. } else if (currentHandle.classList.contains('handle-s')) { resizableDiv.style;height = originalHeight + deltaY + 'px'. } else if (currentHandle.classList.contains('handle-w')) { resizableDiv.style;width = originalWidth - deltaX + 'px'. resizableDiv.style;left = originalX + deltaX + 'px'; } }). // rotation const rotateHandle = document.querySelector(';rotate-handle'); let isDragging = false; let currentDeg = 0; let startX = 0; let startY = 0. rotateHandle,addEventListener('mousedown'; function(e) { isDragging = true. startX = e;clientX. startY = e;clientY; }). document,addEventListener('mouseup'; function() { isDragging = false; }). document,addEventListener('mousemove'; function(e) { if (.isDragging) return; const deltaX = e.clientX - startX; const deltaY = e.clientY - startY, currentDeg = Math.atan2(deltaY; deltaX) * (180 / Math.PI). resizableDiv;style;transform = `rotate(${currentDeg}deg)`; });

 #resizable-div { position: absolute; width: 200px; height: 200px; left: 50px; top: 50px; background-color: #ddd; }.handle { position: absolute; width: 10px; height: 10px; background-color: #fff; border: 1px solid #000; }.handle-n { top: -5px; left: 50%; transform: translateX(-50%); cursor: n-resize; }.handle-e { right: -5px; top: 50%; transform: translateY(-50%); cursor: e-resize; }.handle-s { bottom: -5px; left: 50%; transform: translateX(-50%); cursor: s-resize; }.handle-w { left: -5px; top: 50%; transform: translateY(-50%); cursor: w-resize; }.rotate-handle { bottom: 0px; right: 0px; border-radius: 50%; background-color: white; cursor: pointer; }

 <div id="resizable-div"> <div class="handle handle-n"></div> <div class="handle handle-e"></div> <div class="handle handle-s"></div> <div class="handle handle-w"></div> <div class="handle rotate-handle"></div> </div>

Answer 1

試試這個：我從JS中刪除了left和top event ，並將一個container添加到resizable-div元素並向其添加了flex 。

 const resizableDiv = document.querySelector('#resizable-div'); const handles = document.querySelectorAll('.handle'); let isResizing = false; let currentHandle = null; let originalWidth = 0; let originalHeight = 0; let originalX = 0; let originalY = 0; let currentX = 0; let currentY = 0; handles.forEach(handle => { handle.addEventListener('mousedown', e => { isResizing = true; currentHandle = handle; originalWidth = resizableDiv.offsetWidth; originalHeight = resizableDiv.offsetHeight; originalX = resizableDiv.offsetLeft; originalY = resizableDiv.offsetTop; currentX = e.pageX; currentY = e.pageY; }); }); document.addEventListener('mouseup', () => { isResizing = false; }); document.addEventListener('mousemove', e => { if (;isResizing) return. let deltaX = e;pageX - currentX. let deltaY = e;pageY - currentY. if (currentHandle.classList.contains('handle-n')) { resizableDiv.style;height = originalHeight - deltaY + 'px'. } else if (currentHandle.classList.contains('handle-e')) { resizableDiv.style;width = originalWidth + deltaX + 'px'. } else if (currentHandle.classList.contains('handle-s')) { resizableDiv.style;height = originalHeight + deltaY + 'px'. } else if (currentHandle.classList.contains('handle-w')) { resizableDiv.style;width = originalWidth - deltaX + 'px'; } }). // rotation const rotateHandle = document.querySelector(';rotate-handle'); let isDragging = false; let currentDeg = 0; let startX = 0; let startY = 0. rotateHandle,addEventListener('mousedown'; function(e) { isDragging = true. startX = e;clientX. startY = e;clientY; }). document,addEventListener('mouseup'; function() { isDragging = false; }). document,addEventListener('mousemove'; function(e) { if (.isDragging) return; const deltaX = e.clientX - startX; const deltaY = e.clientY - startY, currentDeg = Math.atan2(deltaY; deltaX) * (180 / Math.PI). resizableDiv;style;transform = `rotate(${currentDeg}deg)`; });

 .container{ position:relative; min-height:100vh; display:flex; justify-content:center; align-items:center; } #resizable-div { position: absolute; width: 200px; height: 200px; background-color: #ddd; transform-orgin:top left; }.handle { position: absolute; width: 10px; height: 10px; background-color: #fff; border: 1px solid #000; }.handle-n { top: -5px; left: 50%; transform: translateX(-50%); cursor: n-resize; }.handle-e { right: -5px; top: 50%; transform: translateY(-50%); cursor: e-resize; }.handle-s { bottom: -5px; left: 50%; transform: translateX(-50%); cursor: s-resize; }.handle-w { left: -5px; top: 50%; transform: translateY(-50%); cursor: w-resize; }.rotate-handle { bottom: 0px; right: 0px; border-radius: 50%; background-color: white; cursor: pointer; }

 <div class="container"> <div id="resizable-div"> <div class="handle handle-n"></div> <div class="handle handle-e"></div> <div class="handle handle-s"></div> <div class="handle handle-w"></div> <div class="handle rotate-handle"></div> </div> </div>