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?