CODEWITHSUNDEEP
javascripthtmlresize
jjyoh
jjyoh

Reputation: 426

Resize a div with a ratio in Javascript (without Jquery)

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?

Upvotes: 2

Views: 1270

Answers (1)

Freelancer
Freelancer

Reputation: 887

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>

Upvotes: 3

Related Questions