使用Javascript中的比例调整div的大小（不使用Jquery）

Question

I'm coding an editing tool in Javascript (I can't use Jquery and HTML Canvas for this project). So the goal is to use the mouse on the edge of a div (ex : a square) and resize the div proportionally (use a ratio). My code right now can resize the square but not proportionnaly. I'd like to make this " https://jqueryui.com/resizable/#aspect-ratio " in pure javascript.

My Code :

 var resizeHandle = document.getElementById('handle_bottom_right'); var box = document.getElementById('box'); resizeHandle.addEventListener('mousedown', initialiseResize, false); var scale = 1.1 function initialiseResize(e) { window.addEventListener('mousemove', startResizing, false); window.addEventListener('mouseup', stopResizing, false); } function startResizing(e) { box.style.width = (e.clientX - box.offsetLeft) + 'px'; box.style.height = (e.clientY - box.offsetTop) + 'px'; } function stopResizing(e) { window.removeEventListener('mousemove', startResizing, false); window.removeEventListener('mouseup', stopResizing, false); } function doubleClicked(element){ setTimeout(function(){ if(document.activeElement !== element){ element.contentEditable = false; } }, 300); } 

 #box { position: relative; width: 150px; height: 150px; background-color: #2196F3; color: white; display:flex; justify-content:center; align-items:center; border-radius: 10px; } #handle_bottom_right { background-color: #727272; width: 10px; height: 10px; cursor: se-resize; position:absolute; right: 0; bottom: 0; } 

 <div id="box" onclick="showCoords(event);"> <p onclick="this.contentEditable=true; doubleClicked(this);" onblur="this.contentEditable=false;" contenteditable="false">double click me to change me</p> <div id="handle_bottom_right"></div> </div> <p id="demo"></p> <p id="demo1"></p> 

Is there someone who has any idees how to solve this?

Answer 1

 var resizeHandle = document.getElementById('handle_bottom_right'); var box = document.getElementById('box'); resizeHandle.addEventListener('mousedown', initialiseResize, false); var scale = 1.1 function initialiseResize(e) { window.addEventListener('mousemove', startResizing, false); window.addEventListener('mouseup', stopResizing, false); } function startResizing(e) { var w = (e.clientX - box.offsetLeft); box.style.width = w + 'px'; //box.style.height = (e.clientY - box.offsetTop) + 'px'; box.style.height = Math.round(scale*w)+'px'; } function stopResizing(e) { window.removeEventListener('mousemove', startResizing, false); window.removeEventListener('mouseup', stopResizing, false); } function doubleClicked(element){ setTimeout(function(){ if(document.activeElement !== element){ element.contentEditable = false; } }, 300); } 

 #box { position: relative; width: 150px; height: 150px; background-color: #2196F3; color: white; display:flex; justify-content:center; align-items:center; border-radius: 10px; } #handle_bottom_right { background-color: #727272; width: 10px; height: 10px; cursor: se-resize; position:absolute; right: 0; bottom: 0; } 

 <div id="box" onclick="showCoords(event);"> <p onclick="this.contentEditable=true; doubleClicked(this);" onblur="this.contentEditable=false;" contenteditable="false">double click me to change me</p> <div id="handle_bottom_right"></div> </div> <p id="demo"></p> <p id="demo1"></p>