resizing a div without changing the position of sides

Question

I have made a div with handles that can be used to resize it. Those work well when the rotation of the div is 0 deg. But when angle of rotation changes and I try to resize the div from one side, the position of other sides changes. I want to keep the position fixed of rest of sides when I try to resize it at from one handle. Here is my code: Help me what type of changes should I do in it.

 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

Try This: I removed the left and top event from JS , anded a container to the resizable-div element and added flex to it.

 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>