We Keep Coding

I want to re-use these code lines but with different querySelectorAll and getElementById

I want to re-use these lines, like in a function or something, because i have 30 arrows and i need to do these 30 times without copying and pasting. The app rotate the arrows according to the position of the circle(The circle is draggable).
document.addEventListener("mousemove", (e) =>{
//'y' is a circle
//Here im getting the position of the center of the circle
let Qx = getPositionAtCenter(document.getElementById("y")).x;
let Qy = getPositionAtCenter(document.getElementById("y")).y;
const anchor = document.getElementById("arrow2");
const rekt = anchor.getBoundingClientRect();
const anchorX= rekt.left + rekt.width / 2;
const anchorY= rekt.top + rekt.height / 2;
const angleDeg = angle(Qx, Qy, anchorX, anchorY);
const arrows = document.querySelectorAll(".arrow2");
arrows.forEach(arrow => {
arrow.style.transform = "rotate(" + (valor + angleDeg) + "deg)";
})
})

If I got your question right, I guess you can do something like this : (replacing the arrow1 2 3 4 array by the names you need)
["arrow1", "arrow2", "arrow3", "arrow4"].forEach(arrowName => {
document.addEventListener("mousemove", (e) =>{
let Qx = getPositionAtCenter(document.getElementById("y")).x;
let Qy = getPositionAtCenter(document.getElementById("y")).y;
const anchor = document.getElementById(arrowName);
const rekt = anchor.getBoundingClientRect();
const anchorX= rekt.left + rekt.width / 2;
const anchorY= rekt.top + rekt.height / 2;
const angleDeg = angle(Qx, Qy, anchorX, anchorY);
const arrows = document.querySelectorAll(`.${arrowName}`);
arrows.forEach(arrow => {
arrow.style.transform = "rotate(" + (valor + angleDeg) + "deg)";
})
})
})

Actually this works, the other thing is that the web lags when I move the circles more than 10 times, thats all my code, when i go to the console this appears: Img: code, console
function flechas(valor){
function getPositionAtCenter(element) {
const {top, left, width, height} = element.getBoundingClientRect();
return {
x: left + width / 2,
y: top + height / 2
};
}
function angle(cx, cy, ex, ey){
const dy = ey - cy;
const dx = ex - cx;
const rad = Math.atan2(dy, dx);
const deg = rad * 180 / Math.PI;
return deg;
}
["arrow1", "arrow2", "arrow3", "arrow4", "arrow5","arrow6","arrow7","arrow8","arrow9","arrow10", "arrow11", "arrow12", "arrow13", "arrow14","arrow15","arrow16","arrow17","arrow18","arrow19","arrow20","arrow21","arrow22","arrow23","arrow24","arrow25","arrow26","arrow27","arrow28","arrow29","arrow30","arrow31","arrow32","arrow33","arrow34","arrow35"].forEach(arrowName=> {
document.addEventListener("mousemove", (e) =>{
let Qx = getPositionAtCenter(document.getElementById("y")).x;
let Qy = getPositionAtCenter(document.getElementById("y")).y;
const anchor = document.getElementById(arrowName);
const rekt = anchor.getBoundingClientRect();
const anchorX= rekt.left + rekt.width / 2;
const anchorY= rekt.top + rekt.height / 2;
const angleDeg = angle(Qx, Qy, anchorX, anchorY);
const arrows = document.querySelectorAll(`.${arrowName}`);
arrows.forEach(arrow => {
arrow.style.transform = "rotate(" + (valor + angleDeg) + "deg)";
})
})
});
}
const k = 9.0*Math.pow(10, 9);
var dragValue;
function move(id){
var element = document.getElementById("x");
element.style.position = "absolute";
element.onmousedown = function(){
dragValue = element;
}
}
function move2(id){
var element = document.getElementById("y");
element.style.position = "absolute";
element.onmousedown = function(){
dragValue = element;
}
}
document.onmouseup = function(e){
dragValue = null;
}
document.onmousemove = function(e){
var x = e.pageX;
var y = e.pageY;
dragValue.style.left = x - 18 + "px";
dragValue.style.top = y - 35 + "px";
function getPositionAtCenter(element) {
const {top, left, width, height} = element.getBoundingClientRect();
return {
x: left + width / 2,
y: top + height / 2
};
}
function getDistanceBetweenElements(a, b) {
const aPosition = getPositionAtCenter(a);
const bPosition = getPositionAtCenter(b);
return Math.hypot(aPosition.x - bPosition.x, aPosition.y - bPosition.y);
}
const distance = getDistanceBetweenElements(
document.getElementById("x"),
document.getElementById("y")
);
document.getElementById("distance").innerHTML = "Distancia: "+distance.toFixed(0.5)+"cm";
let q = document.getElementById("Q").value;
let q2 = document.getElementById("q2").value;
let metros=distance/100;
let f = (k*q*q2)/Math.pow(metros,2);
if(q > 0){
document.getElementById("signo1").innerHTML = "+";
flechas(0);
}else{
document.getElementById("signo1").innerHTML = "-";
flechas(180);
}
if(q2 > 0){
document.getElementById("signo2").innerHTML = "+";
flechas(0);
}else{
document.getElementById("signo2").innerHTML = "-";
flechas(180);
}
document.getElementById("Fe").innerHTML = "Fuerza Electrica: "+f.toExponential(1);
}

Flappy bird code not working - JavaScript

I wanted to write a flappy bird game in javascript but it doesn't seem to work when I open it in my browser. the css works.
lines 147, 154, 31 and 160 in js all seem to be errors, but I do not understand how to fix them.
this is my html:
var poles;
var bird;
var pole1;
var pole2;
var scoreSpan;
var speedSpan;
var speed;
var score;
var flapping;
var playing;
var scoreUpdated;
var gameArea;
var restartBtn;
var containerWidth;
var containerHeight;
function load() {
bird = document.getElementById("bird")
poles = document.getElementById("poles")
pole1 = document.getElementById("pole-1")
pole2 = document.getElementById("pole-2")
scoreSpan = document.getElementById("score")
speedSpan = document.getElementById("speed")
gameArea = document.getElementById("game-area");
restartBtn = document.getElementById("restart-btn");
containerWidth = gameArea.clientWidth;
containerHeight = gameArea.clientHeight;
}
function restart() {
restartBtn.removeEventListener('click', restart);
speed = 2;
score = 0;
scoreUpdated = false;
flapping = false;
playing = true;
speedSpan.textContent = speed;
scoreSpan.textContent = score;
poles.forEach((pole) => {
pole.style.right = 0;
});
bird.style.top = 20 + "%";
gameLoop();
}
function update() {
var polesCurrentPos = parseFloat(window.getComputedStyle(poles[0]).getPropertyValue("right"));
if (polesCurrentPos > containerWidth * 0.85) {
if (!scoreUpdated) {
score += 1;
scoreUpdated = true;
}
scoreSpan.textContent = score;
}
if (polesCurrentPos > containerWidth) {
var newHeight = parseInt(Math.random() * 100);
// ùéðåé âåáä îåè
pole1.style.height = 100 + newHeight + "px";
pole2.style.height = 100 - newHeight + "px";
polesCurrentPos = 0;
speed += 0.25;
speedSpan.textContent = parseInt(speed);
scoreUpdated = false;
}
poles.forEach((pole) => {
pole.style.right = polesCurrentPos + speed + "px";
});
let birdTop = parseFloat(window.getComputedStyle(bird).getPropertyValue("top"));
if (flapping) {
bird.style.top = birdTop + -2 + "px";
} else if (birdTop < containerHeight - bird.clientHeight) {
bird.style.top = birdTop + 2 + "px";
}
if (collision(bird, pole1) || collision(bird, pole2) || birdTop <= 0 || birdTop > containerHeight - bird.clientHeight) {
gameOver();
}
}
function gameOver() {
window.console.log("game over");
playing = false;
restartBtn.addEventListener('click', restart);
}
function gameLoop() {
update();
if (playing) {
requestAnimationFrame(gameLoop);
}
}
function collision(gameDiv1, gameDiv2) {
let left1 = gameDiv1.getBoundingClientRect().left;
let top1 = gameDiv1.getBoundingClientRect().top;
let height1 = gameDiv1.clientHeight;
let width1 = gameDiv1.clientWidth;
let bottom1 = top1 + height1;
let right1 = left1 + width1;
let left2 = gameDiv2.getBoundingClientRect().left;
let top2 = gameDiv2.getBoundingClientRect().top;
let height2 = gameDiv2.clientHeight;
let width2 = gameDiv2.clientWidth;
let bottom2 = top2 + height2;
let right2 = left2 + width2;
if (bottom1 < top2 || top1 > bottom2 || right1 < left2 || left1 > right2)
return false;
return true;
}
document.addEventListener("keydown", function (e) {
var key = e.key;
if (key === " " && playing) {
flapping = true;
}
});
document.addEventListener("keyup", function (e) {
e.preventDefault(); // Stops weird behaviour where releasing space calls restart()
var key = e.key;
if (key === " " && playing) {
flapping = false;
}
});
gameArea.addEventListener("mousedown", function (e) {
if (playing) {
flapping = true;
}
});
gameArea.addEventListener("mouseup", function (e) {
if (playing) {
flapping = false;
}
});
restart();
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title>Flappy Bird</title>
<link rel="stylesheet" type="text/css" href="stylesheet1.css" media="screen" />
<script src="game.js"></script>
</head>
<body onload="load();">
<div id="game">
<div id="game-area">
<div id="bird"></div>
<div class="pole" id="pole-1"></div>
<div class="pole" id="pole-2"></div>
</div>
<div id="game-info">
<p>Score:<span id="score">0</span></p>
<button id="restart-btn">Restart</button>
<p>Speed:<span id="speed">2</span></p>
</div>
</div>
</body>
</html>
There are many errors in the js when I run it and I can't seem to understand why. Does anyone know how to fix it?

One way to solve the problem is to move the event listeners into load and call load in your script:
var poles;
var bird;
var pole1;
var pole2;
var scoreSpan;
var speedSpan;
var speed;
var score;
var flapping;
var playing;
var scoreUpdated;
var gameArea;
var restartBtn;
var containerWidth;
var containerHeight;
function load() {
bird = document.getElementById("bird")
poles = document.querySelectorAll(".pole")
pole1 = document.getElementById("pole-1")
pole2 = document.getElementById("pole-2")
scoreSpan = document.getElementById("score")
speedSpan = document.getElementById("speed")
gameArea = document.getElementById("game-area");
restartBtn = document.getElementById("restart-btn");
containerWidth = gameArea.clientWidth;
containerHeight = gameArea.clientHeight;
gameArea.addEventListener("mousedown", function(e) {
if (playing) {
flapping = true;
}
});
gameArea.addEventListener("mouseup", function(e) {
if (playing) {
flapping = false;
}
});
}
function restart() {
restartBtn.removeEventListener('click', restart);
speed = 2;
score = 0;
scoreUpdated = false;
flapping = false;
playing = true;
speedSpan.textContent = speed;
scoreSpan.textContent = score;
poles.forEach((pole) => {
pole.style.right = 0;
});
bird.style.top = 20 + "%";
gameLoop();
}
function update() {
var polesCurrentPos = parseFloat(window.getComputedStyle(poles[0]).getPropertyValue("right"));
if (polesCurrentPos > containerWidth * 0.85) {
if (!scoreUpdated) {
score += 1;
scoreUpdated = true;
}
scoreSpan.textContent = score;
}
if (polesCurrentPos > containerWidth) {
var newHeight = parseInt(Math.random() * 100);
// ùéðåé âåáä îåè
pole1.style.height = 100 + newHeight + "px";
pole2.style.height = 100 - newHeight + "px";
polesCurrentPos = 0;
speed += 0.25;
speedSpan.textContent = parseInt(speed);
scoreUpdated = false;
}
poles.forEach((pole) => {
pole.style.right = polesCurrentPos + speed + "px";
});
let birdTop = parseFloat(window.getComputedStyle(bird).getPropertyValue("top"));
if (flapping) {
bird.style.top = birdTop + -2 + "px";
} else if (birdTop < containerHeight - bird.clientHeight) {
bird.style.top = birdTop + 2 + "px";
}
if (collision(bird, pole1) || collision(bird, pole2) || birdTop <= 0 || birdTop > containerHeight - bird.clientHeight) {
gameOver();
}
}
function gameOver() {
window.console.log("game over");
playing = false;
restartBtn.addEventListener('click', restart);
}
function gameLoop() {
update();
if (playing) {
requestAnimationFrame(gameLoop);
}
}
function collision(gameDiv1, gameDiv2) {
let left1 = gameDiv1.getBoundingClientRect().left;
let top1 = gameDiv1.getBoundingClientRect().top;
let height1 = gameDiv1.clientHeight;
let width1 = gameDiv1.clientWidth;
let bottom1 = top1 + height1;
let right1 = left1 + width1;
let left2 = gameDiv2.getBoundingClientRect().left;
let top2 = gameDiv2.getBoundingClientRect().top;
let height2 = gameDiv2.clientHeight;
let width2 = gameDiv2.clientWidth;
let bottom2 = top2 + height2;
let right2 = left2 + width2;
if (bottom1 < top2 || top1 > bottom2 || right1 < left2 || left1 > right2)
return false;
return true;
}
document.addEventListener("keydown", function(e) {
var key = e.key;
if (key === " " && playing) {
flapping = true;
}
});
document.addEventListener("keyup", function(e) {
e.preventDefault(); // Stops weird behaviour where releasing space calls restart()
var key = e.key;
if (key === " " && playing) {
flapping = false;
}
});
load();
restart();
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title>Flappy Bird</title>
<link rel="stylesheet" type="text/css" href="stylesheet1.css" media="screen" />
<script src="game.js" defer></script>
</head>
<body>
<div id="game">
<div id="game-area">
<div id="bird"></div>
<div class="pole" id="pole-1"></div>
<div class="pole" id="pole-2"></div>
</div>
<div id="game-info">
<p>Score:<span id="score">0</span></p>
<button id="restart-btn">Restart</button>
<p>Speed:<span id="speed">2</span></p>
</div>
</div>
</body>
</html>
I replaced poles = document.getElementById("poles") with poles = document.querySelectorAll(".pole") to find all poles.

Making an HTML button disappear when clicked through javascript

I am working on a creating a video game, and I want a button to disappear once I click it and move onto the next screen. I can set the function of the button through my html and js file, but I am not sure how to make it disappear once clicked.
My HTML code:
<html>
<head>
<title> Pong </title>
<link type = "text/css" href = "main.css" rel = "stylesheet">
</head>
<canvas id="gameCanvas" width="1350" height="600"></canvas>
<body>
<button id = 'easy_click' onclick="EasyChange()"> Easy </button>
<button id = 'int_change' onclick="intChange()"> Intermediate </button>
<button id = "hard_change" onclick="hardChange()"> Hard </button>
</body>
<script src = "functions.js"></script>
</html>
Here is my JS code:
var canvas;
var canvasContext;
var ballX = 50;
var ballY = 50;
var ballSpeedX = 20;
var ballSpeedY = 10
var menuScreen = false;
var name = "Developed by Jonah Johnson";
var player1Score = 0;
var player2Score = 0;
const WINNING_SCORE = 10;
var easybutton = "Easy";
var hardButton = "Hard";
var intButton = "Intermediate";
var diffLevelEasy = false;
var diffLevelMedium = true;
var diffLevelHard = false;
var showingWinScreen = true;
var paddle1Y = 250;
var paddle2Y = 250;
const PADDLE_THICKNESS = 10;
const PADDLE_HEIGHT = 100;
function calculateMousePos(evt) {
var rect = canvas.getBoundingClientRect();
var root = document.documentElement;
var mouseX = evt.clientX - rect.left - root.scrollLeft;
var mouseY = evt.clientY - rect.top - root.scrollTop;
return {
x:mouseX,
y:mouseY
};
}
//changing of difficulty
//easy changing
function EasyChange() {
diffLevelEasy = true;
diffLevelMedium = false;
diffLevelHard = false;
showingWinScreen = false;
}
function intChange() {
diffLevelEasy = false;
diffLevelMedium = true;
diffLevelHard = false;
showingWinScreen = false;
}
function hardChange() {
diffLevelEasy = false;
diffLevelMedium = false;
diffLevelHard = true;
showingWinScreen = false;
}
function handleMouseClick(evt) {
if(showingWinScreen) {
player1Score = 0;
player2Score = 0;
showingWinScreen = false;
}
}
// getting an easy medium
function handleMouseClick(evt) {
if(easybutton) {
diffLevelEasy = true;
diffLevelMedium = false;
diffLevelHard = false;
showingWinScreen = false;
}
}
//getting medium
function handleMouseClick(evt) {
if(intButton) {
diffLevelEasy = false;
diffLevelMedium = true;
diffLevelHard = false;
showingWinScreen = false;
}
}
//getting hard
function handleMouseClick(evt) {
if(hardButton) {
diffLevelEasy = false;
diffLevelMedium = false;
diffLevelHard = true;
showingWinScreen = false;
}
}
window.onload = function() {
canvas = document.getElementById('gameCanvas');
canvasContext = canvas.getContext('2d');
var framesPerSecond = 30;
setInterval(function() {
moveEverything();
drawEverything();
}, 1000/framesPerSecond);
canvas.addEventListener('mousedown', handleMouseClick);
canvas.addEventListener('mousemove',
function(evt) {
var mousePos = calculateMousePos(evt);
paddle1Y = mousePos.y - (PADDLE_HEIGHT/2);
});
}
function ballReset() {
if(player1Score >= WINNING_SCORE ||
player2Score >= WINNING_SCORE) {
showingWinScreen = true;
}
ballSpeedX = -ballSpeedX;
ballX = canvas.width/2;
ballY = canvas.height/2;
}
function computerMovement() {
/// ai movement
//easy
if(diffLevelEasy === true) {
var paddle2YCenter = paddle2Y + (PADDLE_HEIGHT/2);
if(paddle2YCenter < ballY - 35) {
paddle2Y = paddle2Y + 2;
} else if(paddle2YCenter > ballY + 35) {
paddle2Y = paddle2Y - 2;
}
}
//medium
else if(diffLevelMedium === true) {
var paddle2YCenter = paddle2Y + (PADDLE_HEIGHT/2);
if(paddle2YCenter < ballY - 35) {
paddle2Y = paddle2Y + 12;
} else if(paddle2YCenter > ballY + 35) {
paddle2Y = paddle2Y - 12;
}
}
//hard
else if(diffLevelHard === true) {
var paddle2YCenter = paddle2Y + (PADDLE_HEIGHT/2);
if(paddle2YCenter < ballY - 35) {
paddle2Y = paddle2Y + 18;
} else if(paddle2YCenter > ballY + 35) {
paddle2Y = paddle2Y - 18;
}
}
}
function moveEverything() {
if(showingWinScreen) { //showing win screen
return;
}
computerMovement();
ballX = ballX + ballSpeedX;
ballY = ballY + ballSpeedY;
if(ballX < 0) {
if(ballY > paddle1Y &&
ballY < paddle1Y+PADDLE_HEIGHT) {
ballSpeedX = -ballSpeedX;
var deltaY = ballY
-(paddle1Y+PADDLE_HEIGHT/2);
ballSpeedY = deltaY * 0.35;
} else {
player2Score++; // must be BEFORE ballReset()
ballReset();
}
}
if(ballX > canvas.width) {
if(ballY > paddle2Y &&
ballY < paddle2Y+PADDLE_HEIGHT) {
ballSpeedX = -ballSpeedX;
var deltaY = ballY
-(paddle2Y+PADDLE_HEIGHT/2);
ballSpeedY = deltaY * 0.35;
} else {
player1Score++; // must be BEFORE ballReset()
ballReset();
}
}
if(ballY < 0) {
ballSpeedY = -ballSpeedY;
}
if(ballY > canvas.height) {
ballSpeedY = -ballSpeedY;
}
}
function drawNet() {
for(var i=0;i<canvas.height;i+=40) {
colorRect(canvas.width/2-1,i,2,20,'white');
}
}
function drawEverything() {
// next line blanks out the screen with black
colorRect(0,0,canvas.width,canvas.height,'black');
if(showingWinScreen) {
canvasContext.fillStyle = 'white';
if(player1Score >= WINNING_SCORE) {
canvasContext.fillText("Left Player Won", 350, 200);
} else if(player2Score >= WINNING_SCORE) {
canvasContext.fillText("Right Player Won", 350, 200);
}
canvasContext.fillText("click to continue", 350, 500);
canvasContext.fillText("Difficulty:", 50, 50);
canvasContext.fillText(easybutton, 50, 100);
canvasContext.fillText(intButton, 50, 200);
canvasContext.fillText(hardButton, 50, 300);
return;
}
drawNet();
// this is left player paddle
colorRect(0,paddle1Y,PADDLE_THICKNESS,PADDLE_HEIGHT,'white');
// this is right computer paddle
colorRect(canvas.width-PADDLE_THICKNESS,paddle2Y,PADDLE_THICKNESS,PADDLE_HEIGHT,'white');
// next line draws the ball
colorCircle(ballX, ballY, 10, 'white');
canvasContext.fillText(player1Score, 100, 100);
canvasContext.fillText(player2Score, canvas.width-100, 100);
canvasContext.fillText(name, 100, 590);
}
function colorCircle(centerX, centerY, radius, drawColor) {
canvasContext.fillStyle = drawColor;
canvasContext.beginPath();
canvasContext.arc(centerX, centerY, radius, 0,Math.PI*2,true);
canvasContext.fill();
}
function colorRect(leftX,topY, width,height, drawColor) {
canvasContext.fillStyle = drawColor;
canvasContext.fillRect(leftX,topY, width,height);
}
//sets how hard the game is
if(diffLevel = diffLevelEasy) {
var paddle2YCenter = paddle2Y + (PADDLE_HEIGHT/2);
if(paddle2YCenter < ballY - 35) {
paddle2Y = paddle2Y + 2;
} else if(paddle2YCenter > ballY + 35) {
paddle2Y = paddle2Y - 2;
}
}
I am just trying to make the button delete when clicked, so how do I do that?

Found this on web try it
<input type="button" id="toggler" value="Toggler" onClick="action();" />
<input type="button" id="togglee" value="Togglee" />
<script>
var hidden = false;
function action() {
hidden = !hidden;
if(hidden) {
document.getElementById('togglee').style.visibility = 'hidden';
} else {
document.getElementById('togglee').style.visibility = 'visible';
}
}
</script>

Just call evt.target.remove() and it will remove it from the DOM.

For future scalability and probably, maintainability and with minimum code changes, I'd send the button as an argument to the event handler:
<button id = 'easy_click' onclick="EasyChange(this)"> Easy </button>
<button id = 'int_change' onclick="intChange(this)"> Intermediate </button>
<button id = "hard_change" onclick="hardChange(this)"> Hard </button>
Then set the style in the handler function:
function EasyChange(btn) {
diffLevelEasy = true;
diffLevelMedium = false;
diffLevelHard = false;
showingWinScreen = false;
btn.style.display='none';
}
function intChange(btn) {
diffLevelEasy = false;
diffLevelMedium = true;
diffLevelHard = false;
showingWinScreen = false;
btn.style.display='none';
}
function hardChange(btn) {
diffLevelEasy = false;
diffLevelMedium = false;
diffLevelHard = true;
showingWinScreen = false;
btn.style.display='none';
}
To restore the button use:
btn.style.display='none';
Alternatively, to stop the DOM jumping about use:
btn.style.visibility='hidden';
and
btn.style.visibility='visible';
Also let me know when and where it's published because web pong sounds awesome.

appending images using easeljs and javascript for snake game

This is index.html file.
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Dragon Progression</title>
<script type="text/javascript" src="library/easeljs-0.6.0.min.js"></script>
<script type="text/javascript" src="libs/ndgmr.Collision.js"></script>
<script type="text/javascript" src="js/startScreen.js"></script>
<script type="text/javascript" src="js/gameScreen.js"></script>
</head>
<body onLoad="renderStartScreen()">
<canvas id="canvas1" width="1024" height="698">
Browser does not support canvas. Please upgrade browser.
</canvas>
</body> </html>
This is StartScreen.js
var introBackground;
var startScreenBtn;
var startScreenBtnImg;
var stage;
var stageHeight;
var stageWidth;
//this function render start screen
function renderStartScreen()
{
stage = new createjs.Stage("canvas1");
stage.enableMouseOver();
stageWidth = document.getElementById("canvas1").width;
stageHeight = document.getElementById("canvas1").height;
introBackground = new createjs.Bitmap("assets/images/bg.jpg");
introBackground.x = introBackground.y = 0;
stage.addChild(introBackground);
startScreenBtn = new createjs.Container();
startScreenBtn.x = 500;
startScreenBtn.y = 300;
startScreenBtnImg = new createjs.Bitmap("assets/images/start_button_normal.png");
stage.addChild(startScreenBtn);
startScreenBtn.addChild(startScreenBtnImg);
var btnBg = new createjs.Shape();
btnBg.graphics.beginFill("#FFFFFF");
btnBg.graphics.drawRect(0, 0, 143, 35);
btnBg.alpha = 0.01;
startScreenBtn.addChild(btnBg);
startScreenBtn.addEventListener("mouseover", onstartScreenBtnOver);
startScreenBtn.addEventListener("mouseout", onstartScreenBtnOut);
startScreenBtn.addEventListener("click", onstartScreenBtnClick);
createjs.Ticker.setFPS(45);
createjs.Ticker.addEventListener("tick", startScreenTickHandler);
}
//event handler function get called on start button roll over
function onstartScreenBtnOver()
{
startScreenBtnImg.image.src = "assets/images/start_button_over.png";
}
//event handler function get called on start button roll out
function onstartScreenBtnOut()
{
startScreenBtnImg.image.src = "assets/images/start_button_normal.png";
}
//event handler function get called on start button click
function onstartScreenBtnClick(event)
{
cleanupStartScreen();
}
//event handler function get called on specified interval
function startScreenTickHandler()
{
stage.update();
}
//clean start screen and loads main game
function cleanupStartScreen()
{
stage.removeAllChildren();
stage.update();
stage.removeAllEventListeners();
createjs.Ticker.removeEventListener("tick", startScreenTickHandler);
loadMainGame();
}
This is gamescreen.js file.
var background;
var snakeArray = [];
//var snakeBody;
var snake;
var snakeWidth=25;
var food;
var keyCode;
var CHECK_HIT_ALPHA = 1;
var currDirection;
var tempX;
var tempY;
var prevX;
var prevY;
function loadMainGame()
{
background = new createjs.Bitmap("assets/images/loading_background.jpg");
background.x=0;
background.y=0;
//snake = new createjs.Container();
//snakeTail = new createjs.Shape();
//snakeTail.graphics.beginFill("#E2DC1E").drawPolyStar(40,65,15,3,0,360);
createSnakeHead();
createFood();
snakeArray.currDirection = "";
stage.addChild(background,snake,food);
createjs.Ticker.addEventListener("tick", snakeMovement);
//createjs.Ticker.addEventListener("tick", snakeBodyMovement);
window.onkeydown=function(e)
{
keyCode = e.keyCode || e.which || window.Event;
if(keyCode == 37 && currDirection != "right")
{
currDirection = "left";
snake.rotation= -90;
tempX = snakeArray[0].x;
tempY = snakeArray[0].y;
}
else if(keyCode == 39 && currDirection !="left")
{
currDirection = "right";
snake.rotation = 90;
tempX = snakeArray[0].x;
tempY = snakeArray[0].y;
}
else if(keyCode == 38 && currDirection != "down")
{
currDirection = "up";
snake.rotation = 360;
tempX = snakeArray[0].x;
tempY = snakeArray[0].y;
}
else if(keyCode == 40 && currDirection != "up")
{
currDirection = "down";
snake.rotation = 180;
tempX = snakeArray[0].x;
tempY = snakeArray[0].y;
}
}
}
function createSnakeHead()
{
snake = new createjs.Bitmap("assets/images/snake.png");
snake.type = "head";
var randX = Math.floor(Math.random()*800);
var randY = Math.floor(Math.random()*500);
snake.x = randX;
snake.y = randY;
snake.regX = snake.image.width/2;
snake.regY = snake.image.height/2;
snakeArray.push(snake);
}
function createFood()
{
food = new createjs.Bitmap("assets/images/food.png");
var randX = Math.floor(Math.random()*800);
var randY = Math.floor(Math.random()*500);
food.x = randX;
food.y = randY;
}
function snakeMovement()
{
console.log(snakeArray.length);
for(var i=0;i<=snakeArray.length-1;i++)
{
if(currDirection=="left")
{
snakeArray[i].rotation= -90;
snakeArray[i].x = snakeArray[i].x - 2;
prevX = snakeArray[i].x;
prevY = snakeArray[i].y;
if (snakeArray[i].x <= 0)
{
snakeArray[i].x = stageWidth;
}
snakeBodyMovement(prevX,prevY);
}
else if(currDirection == "right")
{
//tempX = snakeArray[0].x;
snakeArray[i].rotation= 90;
snakeArray[i].x = snakeArray[i].x + 2;
prevX = snakeArray[i].x;
prevY = snakeArray[i].y;
if (snakeArray[i].x >= stageWidth)
{
snakeArray[i].x = 0;
}
snakeBodyMovement(prevX,prevY);
snakeArray[i].currDirection = "right";
}
else if(currDirection == "up")
{
//tempY = snakeArray[0].y;
snakeArray[i].rotation= 360;
snakeArray[i].y = snakeArray[i].y - 2;
prevX = snakeArray[i].x;
prevY = snakeArray[i].y;
if(snakeArray[i].y <=0)
{
snakeArray[i].y = stageHeight;
}
snakeBodyMovement(prevX,prevY);
snakeArray[i].currDirection = "up";
}
else if(currDirection == "down")
{
//var tempY = snakeArray[0].y;
snakeArray[i].rotation= 180;
snakeArray[i].y = snakeArray[i].y + 2;
prevX = snakeArray[i].x;
prevY = snakeArray[i].y;
if(snakeArray[i].y >= stageHeight)
{
snakeArray[i].y = 0;
}
snakeBodyMovement(prevX,prevY);
snakeArray[i].currDirection = "down";
}
}
foodSnakeCollision();
stage.update();
}
function foodSnakeCollision()
{
var intersection = ndgmr.checkPixelCollision(snake,food,CHECK_HIT_ALPHA);
if(intersection)
{
console.log("Eat food");
var randX = Math.floor(Math.random()*800);
var randY = Math.floor(Math.random()*500);
food.x = randX;
food.y = randY;
createSnake();
}
}
function createSnake()
{
var snakeBody = new createjs.Bitmap("assets/images/snake.png");
snakeBody.type = "body";
snakeBody.regX = snake.image.width/2;
snakeBody.regY = snake.image.height/2;
if(currDirection=="left")
{
snakeBody.x = snakeArray[snakeArray.length-1].x + 25;
snakeBody.y =snakeArray[snakeArray.length-1].y +0;
}
if(currDirection == "right")
{
snakeBody.x = snakeArray[snakeArray.length-1].x - 25;
snakeBody.y =snakeArray[snakeArray.length-1].y - 0;
}
if(currDirection == "up")
{
snakeBody.x = snakeArray[snakeArray.length-1].x + 0;
snakeBody.y =snakeArray[snakeArray.length-1].y + 25;
}
if(currDirection == "down")
{
snakeBody.x = snakeArray[snakeArray.length-1].x - 0;
snakeBody.y =snakeArray[snakeArray.length-1].y - 25;
}
snakeArray.push(snakeBody);
console.log(snakeArray.length + "after collision");
stage.addChild(snakeBody);
}
function snakeBodyMovement(prevX,prevY)
{
for(var i=1;i<=snakeArray.length-1;i++)
{
if(currDirection == "left")
{
snakeArray[i].x = prevX + 15;
snakeArray[i].y = prevY;
}
else if(currDirection == "right")
{
snakeArray[i].x = prevX - 15;
snakeArray[i].y = prevY;
}
else if(currDirection == "up")
{
snakeArray[i].x = prevX;
snakeArray[i].y = prevY + 15;
}
else if(currDirection == "down")
{
snakeArray[i].x = prevX;
snakeArray[i].y = prevY - 15;
}
}
}
in gameScreen.js file,the new snakebody that i add using snakebody is not appending one after the other. It is adding one below the other.Please suggest how do i smoothly move the snake body and the additional snake parts that gets added once it collides with the food.

I think the root of your problem here is that you aren't preloading your images. Consider your code block from GameScreen.js
snake = new createjs.Bitmap("assets/images/snake.png");
snake.type = "head";
var randX = Math.floor(Math.random()*800);
var randY = Math.floor(Math.random()*500);
snake.x = randX;
snake.y = randY;
console.log("Snake head width: " + snake.image.width);
snake.regX = snake.image.width/2;
snake.regY = snake.image.height/2;
The image isn't loaded from the server until the declaration of the Bitmap is made. Because loading images is asynchronous, your image won't necessarily be loaded by the time it hits the line snake.regX = snake.image.width/2; and the width and height will both be 0. You can confirm this by looking at the console log I have added. With your registration points off, all your positioning will be off as well.
My suggestion would be to use the preloadjs library that is part of the createjs suite to preload your images. http://www.createjs.com/Docs/PreloadJS/modules/PreloadJS.html.

How to make HTML element resizable using pure Javascript?

I was wondering how we can make a HTML element like <div> or <p> tag element resizable when clicked using pure JavaScript, not the jQuery library or any other library.

I really recommend using some sort of library, but you asked for it, you get it:
var p = document.querySelector('p'); // element to make resizable
p.addEventListener('click', function init() {
p.removeEventListener('click', init, false);
p.className = p.className + ' resizable';
var resizer = document.createElement('div');
resizer.className = 'resizer';
p.appendChild(resizer);
resizer.addEventListener('mousedown', initDrag, false);
}, false);
var startX, startY, startWidth, startHeight;
function initDrag(e) {
startX = e.clientX;
startY = e.clientY;
startWidth = parseInt(document.defaultView.getComputedStyle(p).width, 10);
startHeight = parseInt(document.defaultView.getComputedStyle(p).height, 10);
document.documentElement.addEventListener('mousemove', doDrag, false);
document.documentElement.addEventListener('mouseup', stopDrag, false);
}
function doDrag(e) {
p.style.width = (startWidth + e.clientX - startX) + 'px';
p.style.height = (startHeight + e.clientY - startY) + 'px';
}
function stopDrag(e) {
document.documentElement.removeEventListener('mousemove', doDrag, false);
document.documentElement.removeEventListener('mouseup', stopDrag, false);
}
Demo
Remember that this may not run in all browsers (tested only in Firefox, definitely not working in IE <9).

what about a pure css3 solution?
div {
resize: both;
overflow: auto;
}
MDN Web Docs
W3Schools example
Browser support

Is simple:
Example:https://jsfiddle.net/RainStudios/mw786v1w/
var element = document.getElementById('element');
//create box in bottom-left
var resizer = document.createElement('div');
resizer.style.width = '10px';
resizer.style.height = '10px';
resizer.style.background = 'red';
resizer.style.position = 'absolute';
resizer.style.right = 0;
resizer.style.bottom = 0;
resizer.style.cursor = 'se-resize';
//Append Child to Element
element.appendChild(resizer);
//box function onmousemove
resizer.addEventListener('mousedown', initResize, false);
//Window funtion mousemove & mouseup
function initResize(e) {
window.addEventListener('mousemove', Resize, false);
window.addEventListener('mouseup', stopResize, false);
}
//resize the element
function Resize(e) {
element.style.width = (e.clientX - element.offsetLeft) + 'px';
element.style.height = (e.clientY - element.offsetTop) + 'px';
}
//on mouseup remove windows functions mousemove & mouseup
function stopResize(e) {
window.removeEventListener('mousemove', Resize, false);
window.removeEventListener('mouseup', stopResize, false);
}

See my cross browser compatible resizer.
<!doctype html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>resizer</title>
<meta name="author" content="Andrej Hristoliubov anhr#mail.ru">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="https://rawgit.com/anhr/resizer/master/Common.js"></script>
<script type="text/javascript" src="https://rawgit.com/anhr/resizer/master/resizer.js"></script>
<style>
.element {
border: 1px solid #999999;
border-radius: 4px;
margin: 5px;
padding: 5px;
}
</style>
<script type="text/javascript">
function onresize() {
var element1 = document.getElementById("element1");
var element2 = document.getElementById("element2");
var element3 = document.getElementById("element3");
var ResizerY = document.getElementById("resizerY");
ResizerY.style.top = element3.offsetTop - 15 + "px";
var topElements = document.getElementById("topElements");
topElements.style.height = ResizerY.offsetTop - 20 + "px";
var height = topElements.clientHeight - 32;
if (height < 0)
height = 0;
height += 'px';
element1.style.height = height;
element2.style.height = height;
}
function resizeX(x) {
//consoleLog("mousemove(X = " + e.pageX + ")");
var element2 = document.getElementById("element2");
element2.style.width =
element2.parentElement.clientWidth
+ document.getElementById('rezizeArea').offsetLeft
- x
+ 'px';
}
function resizeY(y) {
//consoleLog("mousemove(Y = " + e.pageY + ")");
var element3 = document.getElementById("element3");
var height =
element3.parentElement.clientHeight
+ document.getElementById('rezizeArea').offsetTop
- y
;
//consoleLog("mousemove(Y = " + e.pageY + ") height = " + height + " element3.parentElement.clientHeight = " + element3.parentElement.clientHeight);
if ((height + 100) > element3.parentElement.clientHeight)
return;//Limit of the height of the elemtnt 3
element3.style.height = height + 'px';
onresize();
}
var emailSubject = "Resizer example error";
</script>
</head>
<body>
<div id='Message'></div>
<h1>Resizer</h1>
<p>Please see example of resizing of the HTML element by mouse dragging.</p>
<ul>
<li>Drag the red rectangle if you want to change the width of the Element 1 and Element 2</li>
<li>Drag the green rectangle if you want to change the height of the Element 1 Element 2 and Element 3</li>
<li>Drag the small blue square at the left bottom of the Element 2, if you want to resize of the Element 1 Element 2 and Element 3</li>
</ul>
<div id="rezizeArea" style="width:1000px; height:250px; overflow:auto; position: relative;" class="element">
<div id="topElements" class="element" style="overflow:auto; position:absolute; left: 0; top: 0; right:0;">
<div id="element2" class="element" style="width: 30%; height:10px; float: right; position: relative;">
Element 2
<div id="resizerXY" style="width: 10px; height: 10px; background: blue; position:absolute; left: 0; bottom: 0;"></div>
<script type="text/javascript">
resizerXY("resizerXY", function (e) {
resizeX(e.pageX + 10);
resizeY(e.pageY + 50);
});
</script>
</div>
<div id="resizerX" style="width: 10px; height:100%; background: red; float: right;"></div>
<script type="text/javascript">
resizerX("resizerX", function (e) {
resizeX(e.pageX + 25);
});
</script>
<div id="element1" class="element" style="height:10px; overflow:auto;">Element 1</div>
</div>
<div id="resizerY" style="height:10px; position:absolute; left: 0; right:0; background: green;"></div>
<script type="text/javascript">
resizerY("resizerY", function (e) {
resizeY(e.pageY + 25);
});
</script>
<div id="element3" class="element" style="height:100px; position:absolute; left: 0; bottom: 0; right:0;">Element 3</div>
</div>
<script type="text/javascript">
onresize();
</script>
</body>
</html>
Also see my example of resizer

just using the mousemove event in vanilla js
steps
add the mousemove to your target
listen to the target move event
get the pointer position, resize your target
codes
const div = document.querySelector(`div.before`);
const box = document.querySelector(`div.container`);
box.addEventListener(`mousemove`, (e) => {
const {
offsetX,
offsetY,
} = e;
div.style.width = offsetX + `px`;
});
live demo
https://codepen.io/xgqfrms/full/wvMQqZL
refs
https://developer.mozilla.org/en-US/docs/Web/API/Element/mousemove_event
https://medium.com/the-z/making-a-resizable-div-in-js-is-not-easy-as-you-think-bda19a1bc53d

here is a example with resizer helpers in all sides and corners
element = document.getElementById("element")
makeResizable(element,10,10)
function makeResizable(element, minW = 100, minH = 100, size = 20)
{
const top = document.createElement('div');
top.style.width = '100%';
top.style.height = size + 'px';
top.style.backgroundColor = 'transparent';
top.style.position = 'absolute';
top.style.top = - (size/2) + 'px';
top.style.left = '0px';
top.style.cursor = 'n-resize';
top.addEventListener('mousedown',resizeYNegative())
element.appendChild(top);
const bottom = document.createElement('div');
bottom.style.width = '100%';
bottom.style.height = size + 'px';
bottom.style.backgroundColor = 'transparent';
bottom.style.position = 'absolute';
bottom.style.bottom = - (size/2) + 'px';
bottom.style.left = '0px';
bottom.style.cursor = 'n-resize';
bottom.addEventListener('mousedown',resizeYPositive())
element.appendChild(bottom);
const left = document.createElement('div');
left.style.width = size + 'px';
left.style.height = '100%';
left.style.backgroundColor = 'transparent';
left.style.position = 'absolute';
left.style.top = '0px';
left.style.left = - (size/2) + 'px';
left.style.cursor = 'e-resize';
left.addEventListener('mousedown',resizeXNegative())
element.appendChild(left);
const right = document.createElement('div');
right.style.width = size + 'px';
right.style.height = '100%';
right.style.backgroundColor = 'transparent';
right.style.position = 'absolute';
right.style.top = '0px';
right.style.right = - (size/2) + 'px';
right.style.cursor = 'e-resize';
right.addEventListener('mousedown',resizeXPositive())
element.appendChild(right);
const corner1 = document.createElement('div');
corner1.style.width = size + 'px';
corner1.style.height = size + 'px';
corner1.style.backgroundColor = 'transparent';
corner1.style.position = 'absolute';
corner1.style.top = - (size/2) + 'px';
corner1.style.left = - (size/2) + 'px';
corner1.style.cursor = 'nw-resize';
corner1.addEventListener('mousedown',resizeXNegative())
corner1.addEventListener('mousedown',resizeYNegative())
element.appendChild(corner1);
const corner2 = document.createElement('div');
corner2.style.width = size + 'px';
corner2.style.height = size + 'px';
corner2.style.backgroundColor = 'transparent';
corner2.style.position = 'absolute';
corner2.style.top = - (size/2) + 'px';
corner2.style.right = - (size/2) + 'px';
corner2.style.cursor = 'ne-resize';
corner2.addEventListener('mousedown',resizeXPositive())
corner2.addEventListener('mousedown',resizeYNegative())
element.appendChild(corner2);
const corner3 = document.createElement('div');
corner3.style.width = size + 'px';
corner3.style.height = size + 'px';
corner3.style.backgroundColor = 'transparent';
corner3.style.position = 'absolute';
corner3.style.bottom = - (size/2) + 'px';
corner3.style.left = - (size/2) + 'px';
corner3.style.cursor = 'sw-resize';
corner3.addEventListener('mousedown',resizeXNegative())
corner3.addEventListener('mousedown',resizeYPositive())
element.appendChild(corner3);
const corner4 = document.createElement('div');
corner4.style.width = size + 'px';
corner4.style.height = size + 'px';
corner4.style.backgroundColor = 'transparent';
corner4.style.position = 'absolute';
corner4.style.bottom = - (size/2) + 'px';
corner4.style.right = - (size/2) + 'px';
corner4.style.cursor = 'se-resize';
corner4.addEventListener('mousedown',resizeXPositive())
corner4.addEventListener('mousedown',resizeYPositive())
element.appendChild(corner4);
function get_int_style(key)
{
return parseInt(window.getComputedStyle(element).getPropertyValue(key));
}
function resizeXPositive()
{
let offsetX
function dragMouseDown(e) {
if(e.button !== 0) return
e = e || window.event;
e.preventDefault();
const {clientX} = e;
offsetX = clientX - element.offsetLeft - get_int_style('width');
document.addEventListener('mouseup', closeDragElement)
document.addEventListener('mousemove', elementDrag)
}
function elementDrag(e) {
const {clientX} = e;
let x = clientX - element.offsetLeft - offsetX
if(x < minW) x = minW;
element.style.width = x + 'px';
}
function closeDragElement() {
document.removeEventListener("mouseup", closeDragElement);
document.removeEventListener("mousemove", elementDrag);
}
return dragMouseDown
}
function resizeYPositive()
{
let offsetY
function dragMouseDown(e) {
if(e.button !== 0) return
e = e || window.event;
e.preventDefault();
const {clientY} = e;
offsetY = clientY - element.offsetTop - get_int_style('height');
document.addEventListener('mouseup',closeDragElement)
document.addEventListener('mousemove',elementDrag)
}
function elementDrag(e) {
const {clientY} = e;
let y = clientY - element.offsetTop - offsetY;
if(y < minH) y = minH;
element.style.height = y + 'px';
}
function closeDragElement() {
document.removeEventListener("mouseup", closeDragElement);
document.removeEventListener("mousemove", elementDrag);
}
return dragMouseDown
}
function resizeXNegative()
{
let offsetX
let startX
let startW
let maxX
function dragMouseDown(e) {
if(e.button !== 0) return
e = e || window.event;
e.preventDefault();
const {clientX} = e;
startX = get_int_style('left')
startW = get_int_style('width')
offsetX = clientX - startX;
maxX = startX + startW - minW
document.addEventListener('mouseup',closeDragElement)
document.addEventListener('mousemove',elementDrag)
}
function elementDrag(e) {
const {clientX} = e;
let x = clientX - offsetX
let w = startW + startX - x
if(w < minW) w = minW;
if(x > maxX) x = maxX;
element.style.left = x + 'px';
element.style.width = w + 'px';
}
function closeDragElement() {
document.removeEventListener("mouseup", closeDragElement);
document.removeEventListener("mousemove", elementDrag);
}
return dragMouseDown
}
function resizeYNegative()
{
let offsetY
let startY
let startH
let maxY
function dragMouseDown(e) {
if(e.button !== 0) return
e = e || window.event;
e.preventDefault();
const {clientY} = e;
startY = get_int_style('top')
startH = get_int_style('height')
offsetY = clientY - startY;
maxY = startY + startH - minH
document.addEventListener('mouseup',closeDragElement,false)
document.addEventListener('mousemove',elementDrag,false)
}
function elementDrag(e) {
const {clientY} = e;
let y = clientY - offsetY
let h = startH + startY - y
if(h < minH) h = minH;
if(y > maxY) y = maxY;
element.style.top = y + 'px';
element.style.height = h + 'px';
}
function closeDragElement() {
document.removeEventListener("mouseup", closeDragElement);
document.removeEventListener("mousemove", elementDrag);
}
return dragMouseDown
}
}
#element {
position: absolute;
background-color: #f1f1f1;
border: 1px solid #d3d3d3;
left: 40px;
top: 40px;
width: 100px;
height: 100px;
border-radius: 5px;
}
<div id="element"></div>

I just created a CodePen that shows how this can be done pretty easily using ES6.
http://codepen.io/travist/pen/GWRBQV
Basically, here is the class that does this.
let getPropertyValue = function(style, prop) {
let value = style.getPropertyValue(prop);
value = value ? value.replace(/[^0-9.]/g, '') : '0';
return parseFloat(value);
}
let getElementRect = function(element) {
let style = window.getComputedStyle(element, null);
return {
x: getPropertyValue(style, 'left'),
y: getPropertyValue(style, 'top'),
width: getPropertyValue(style, 'width'),
height: getPropertyValue(style, 'height')
}
}
class Resizer {
constructor(wrapper, element, options) {
this.wrapper = wrapper;
this.element = element;
this.options = options;
this.offsetX = 0;
this.offsetY = 0;
this.handle = document.createElement('div');
this.handle.setAttribute('class', 'drag-resize-handlers');
this.handle.setAttribute('data-direction', 'br');
this.wrapper.appendChild(this.handle);
this.wrapper.style.top = this.element.style.top;
this.wrapper.style.left = this.element.style.left;
this.wrapper.style.width = this.element.style.width;
this.wrapper.style.height = this.element.style.height;
this.element.style.position = 'relative';
this.element.style.top = 0;
this.element.style.left = 0;
this.onResize = this.resizeHandler.bind(this);
this.onStop = this.stopResize.bind(this);
this.handle.addEventListener('mousedown', this.initResize.bind(this));
}
initResize(event) {
this.stopResize(event, true);
this.handle.addEventListener('mousemove', this.onResize);
this.handle.addEventListener('mouseup', this.onStop);
}
resizeHandler(event) {
this.offsetX = event.clientX - (this.wrapper.offsetLeft + this.handle.offsetLeft);
this.offsetY = event.clientY - (this.wrapper.offsetTop + this.handle.offsetTop);
let wrapperRect = getElementRect(this.wrapper);
let elementRect = getElementRect(this.element);
this.wrapper.style.width = (wrapperRect.width + this.offsetX) + 'px';
this.wrapper.style.height = (wrapperRect.height + this.offsetY) + 'px';
this.element.style.width = (elementRect.width + this.offsetX) + 'px';
this.element.style.height = (elementRect.height + this.offsetY) + 'px';
}
stopResize(event, nocb) {
this.handle.removeEventListener('mousemove', this.onResize);
this.handle.removeEventListener('mouseup', this.onStop);
}
}
class Dragger {
constructor(wrapper, element, options) {
this.wrapper = wrapper;
this.options = options;
this.element = element;
this.element.draggable = true;
this.element.setAttribute('draggable', true);
this.element.addEventListener('dragstart', this.dragStart.bind(this));
}
dragStart(event) {
let wrapperRect = getElementRect(this.wrapper);
var x = wrapperRect.x - parseFloat(event.clientX);
var y = wrapperRect.y - parseFloat(event.clientY);
event.dataTransfer.setData("text/plain", this.element.id + ',' + x + ',' + y);
}
dragStop(event, prevX, prevY) {
var posX = parseFloat(event.clientX) + prevX;
var posY = parseFloat(event.clientY) + prevY;
this.wrapper.style.left = posX + 'px';
this.wrapper.style.top = posY + 'px';
}
}
class DragResize {
constructor(element, options) {
options = options || {};
this.wrapper = document.createElement('div');
this.wrapper.setAttribute('class', 'tooltip drag-resize');
if (element.parentNode) {
element.parentNode.insertBefore(this.wrapper, element);
}
this.wrapper.appendChild(element);
element.resizer = new Resizer(this.wrapper, element, options);
element.dragger = new Dragger(this.wrapper, element, options);
}
}
document.body.addEventListener('dragover', function (event) {
event.preventDefault();
return false;
});
document.body.addEventListener('drop', function (event) {
event.preventDefault();
var dropData = event.dataTransfer.getData("text/plain").split(',');
var element = document.getElementById(dropData[0]);
element.dragger.dragStop(event, parseFloat(dropData[1]), parseFloat(dropData[2]));
return false;
});

I have created a function that recieve an id of an html element and adds a border to it's right side
the function is general and just recieves an id so you can copy it as it is and it will work
var myoffset;
function resizeE(elem){
var borderDiv = document.createElement("div");
borderDiv.className = "border";
borderDiv.addEventListener("mousedown",myresize = function myrsize(e) {
myoffset = e.clientX - (document.getElementById(elem).offsetLeft + parseInt(window.getComputedStyle(document.getElementById(elem)).getPropertyValue("width")));
window.addEventListener("mouseup",mouseUp);
document.addEventListener("mousemove",mouseMove = function mousMove(e) {
document.getElementById(elem).style.width = `${e.clientX - myoffset - document.getElementById(elem).offsetLeft}px`;
});
});
document.getElementById(elem).appendChild(borderDiv);
}
function mouseUp() {
document.removeEventListener("mousemove", mouseMove);
window.removeEventListener("mouseup",mouseUp);
}
function load()
{
resizeE("resizeableDiv");
resizeE("anotherresizeableDiv");
resizeE("anotherresizeableDiv1");
}
.border {
position: absolute;
cursor: e-resize;
width: 9px;
right: -5px;
top: 0;
height: 100%;
}
#resizeableDiv {
width: 30vw;
height: 30vh;
background-color: #84f4c6;
position: relative;
}
#anotherresizeableDiv {
width: 30vw;
height: 30vh;
background-color: #9394f4;
position: relative;
}
#anotherresizeableDiv1 {
width: 30vw;
height: 30vh;
background-color: #43f4f4;
position: relative;
}
#anotherresizeableDiv1 .border{
background-color: black;
}
#anotherresizeableDiv .border{
width: 30px;
right: -200px;
background-color: green;
}
<body onload="load()">
<div id="resizeableDiv">change my size with the east border</div>
<div id="anotherresizeableDiv1">with visible border</div>
</body>
<div id="anotherresizeableDiv">with editted outside border</div>
</body>
resizeE("resizeableDiv"); //this calls a function that does the magic to the id inserted

There are very good examples here to start trying with, but all of them are based on adding some extra or external element like a "div" as a reference element to drag it, and calculate the new dimensions or position of the original element.
Here's an example that doesn't use any extra elements. We could add borders, padding or margin without affecting its operation.
In this example we have not added color, nor any visual reference to the borders nor to the lower right corner as a clue where you can enlarge or reduce dimensions, but using the cursor around the resizable elements the clues appears!
let resizerForCenter = new Resizer('center')
resizerForCenter.initResizer()
See it in action with CodeSandbox:
In this example we use ES6, and a module that exports a class called Resizer.
An example is worth a thousand words:
Or with the code snippet:
const html = document.querySelector('html')
class Resizer {
constructor(elemId) {
this._elem = document.getElementById(elemId)
/**
* Stored binded context handlers for method passed to eventListeners!
*
* See: https://stackoverflow.com/questions/9720927/removing-event-listeners-as-class-prototype-functions
*/
this._checkBorderHandler = this._checkBorder.bind(this)
this._doResizeHandler = this._doResize.bind(this)
this._initResizerHandler = this.initResizer.bind(this)
this._onResizeHandler = this._onResize.bind(this)
}
initResizer() {
this.stopResizer()
this._beginResizer()
}
_beginResizer() {
this._elem.addEventListener('mousemove', this._checkBorderHandler, false)
}
stopResizer() {
html.style.cursor = 'default'
this._elem.style.cursor = 'default'
window.removeEventListener('mousemove', this._doResizeHandler, false)
window.removeEventListener('mouseup', this._initResizerHandler, false)
this._elem.removeEventListener('mousedown', this._onResizeHandler, false)
this._elem.removeEventListener('mousemove', this._checkBorderHandler, false)
}
_doResize(e) {
let elem = this._elem
let boxSizing = getComputedStyle(elem).boxSizing
let borderRight = 0
let borderLeft = 0
let borderTop = 0
let borderBottom = 0
let paddingRight = 0
let paddingLeft = 0
let paddingTop = 0
let paddingBottom = 0
switch (boxSizing) {
case 'content-box':
paddingRight = parseInt(getComputedStyle(elem).paddingRight)
paddingLeft = parseInt(getComputedStyle(elem).paddingLeft)
paddingTop = parseInt(getComputedStyle(elem).paddingTop)
paddingBottom = parseInt(getComputedStyle(elem).paddingBottom)
break
case 'border-box':
borderRight = parseInt(getComputedStyle(elem).borderRight)
borderLeft = parseInt(getComputedStyle(elem).borderLeft)
borderTop = parseInt(getComputedStyle(elem).borderTop)
borderBottom = parseInt(getComputedStyle(elem).borderBottom)
break
default: break
}
let horizontalAdjustment = (paddingRight + paddingLeft) - (borderRight + borderLeft)
let verticalAdjustment = (paddingTop + paddingBottom) - (borderTop + borderBottom)
let newWidth = elem.clientWidth + e.movementX - horizontalAdjustment + 'px'
let newHeight = elem.clientHeight + e.movementY - verticalAdjustment + 'px'
let cursorType = getComputedStyle(elem).cursor
switch (cursorType) {
case 'all-scroll':
elem.style.width = newWidth
elem.style.height = newHeight
break
case 'col-resize':
elem.style.width = newWidth
break
case 'row-resize':
elem.style.height = newHeight
break
default: break
}
}
_onResize(e) {
// On resizing state!
let elem = e.target
let newCursorType = undefined
let cursorType = getComputedStyle(elem).cursor
switch (cursorType) {
case 'nwse-resize':
newCursorType = 'all-scroll'
break
case 'ew-resize':
newCursorType = 'col-resize'
break
case 'ns-resize':
newCursorType = 'row-resize'
break
default: break
}
html.style.cursor = newCursorType // Avoid cursor's flickering
elem.style.cursor = newCursorType
// Remove what is not necessary, and could have side effects!
elem.removeEventListener('mousemove', this._checkBorderHandler, false);
// Events on resizing state
/**
* We do not apply the mousemove event on the elem to resize it, but to the window to prevent the mousemove from slippe out of the elem to resize. This work bc we calculate things based on the mouse position
*/
window.addEventListener('mousemove', this._doResizeHandler, false);
window.addEventListener('mouseup', this._initResizerHandler, false);
}
_checkBorder(e) {
const elem = e.target
const borderSensitivity = 5
const coor = getCoordenatesCursor(e)
const onRightBorder = ((coor.x + borderSensitivity) > elem.scrollWidth)
const onBottomBorder = ((coor.y + borderSensitivity) > elem.scrollHeight)
const onBottomRightCorner = (onRightBorder && onBottomBorder)
if (onBottomRightCorner) {
elem.style.cursor = 'nwse-resize'
} else if (onRightBorder) {
elem.style.cursor = 'ew-resize'
} else if (onBottomBorder) {
elem.style.cursor = 'ns-resize'
} else {
elem.style.cursor = 'auto'
}
if (onRightBorder || onBottomBorder) {
elem.addEventListener('mousedown', this._onResizeHandler, false)
} else {
elem.removeEventListener('mousedown', this._onResizeHandler, false)
}
}
}
function getCoordenatesCursor(e) {
let elem = e.target;
// Get the Viewport-relative coordinates of cursor.
let viewportX = e.clientX
let viewportY = e.clientY
// Viewport-relative position of the target element.
let elemRectangle = elem.getBoundingClientRect()
// The function returns the largest integer less than or equal to a given number.
let x = Math.floor(viewportX - elemRectangle.left) // - elem.scrollWidth
let y = Math.floor(viewportY - elemRectangle.top) // - elem.scrollHeight
return {x, y}
}
let resizerForCenter = new Resizer('center')
resizerForCenter.initResizer()
let resizerForLeft = new Resizer('left')
resizerForLeft.initResizer()
setTimeout(handler, 10000, true); // 10s
function handler() {
resizerForCenter.stopResizer()
}
body {
background-color: white;
}
#wrapper div {
/* box-sizing: border-box; */
position: relative;
float:left;
overflow: hidden;
height: 50px;
width: 50px;
padding: 3px;
}
#left {
background-color: blueviolet;
}
#center {
background-color:lawngreen ;
}
#right {
background: blueviolet;
}
#wrapper {
border: 5px solid hotpink;
display: inline-block;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Resizer v0.0.1</title>
</head>
<body>
<div id="wrapper">
<div id="left">Left</div>
<div id="center">Center</div>
<div id="right">Right</div>
</div>
</body>
</html>

// import
function get_difference(pre, mou) {
return {
x: mou.x - pre.x,
y: mou.y - pre.y
};
}
/*
if your panel is in a nested environment, which the parent container's width and height does not equa to document width
and height, for example, in an element `canvas`, then edit it to
function oMousePos(e) {
var rc = canvas.getBoundingClientRect();
return {
x: e.clientX - rc.left,
y: e.clientY - rc.top,
};
}
*/
function oMousePos(e) {
return {
x: e.clientX,
y: e.clientY,
};
}
function render_element(styles, el) {
for (const [kk, vv] of Object.entries(styles)) {
el.style[kk] = vv;
}
}
class MoveablePanel {
/*
prevent an element from moving out of window
*/
constructor(container, draggable, left, top) {
this.container = container;
this.draggable = draggable;
this.left = left;
this.top = top;
let rect = container.getBoundingClientRect();
this.width = rect.width;
this.height = rect.height;
this.status = false;
// initial position of the panel, should not be changed
this.original = {
left: left,
top: top
};
// current left and top postion
// {this.left, this.top}
// assign the panel to initial position
// initalize in registration
this.default();
if (!MoveablePanel._instance) {
MoveablePanel._instance = [];
}
MoveablePanel._instance.push(this);
}
mousedown(e) {
this.status = true;
this.previous = oMousePos(e)
}
mousemove(e) {
if (!this.status) {
return;
}
let pos = oMousePos(e);
let vleft = this.left + pos.x - this.previous.x;
let vtop = this.top + pos.y - this.previous.y;
let kleft, ktop;
if (vleft < 0) {
kleft = 0;
} else if (vleft > window.innerWidth - this.width) {
kleft = window.innerWidth - this.width;
} else {
kleft = vleft;
}
if (vtop < 0) {
ktop = 0;
} else if (vtop > window.innerHeight - this.height) {
ktop = window.innerHeight - this.height;
} else {
ktop = vtop;
}
this.container.style.left = `${kleft}px`;
this.container.style.top = `${ktop}px`;
}
/*
sometimes user move the cursor too fast which mouseleave is previous than mouseup
to prevent moving too fast and break the control, mouseleave is handled the same as mouseup
*/
mouseupleave(e) {
if (!this.status) {
return null;
}
this.status = false;
let pos = oMousePos(e);
let vleft = this.left + pos.x - this.previous.x;
let vtop = this.top + pos.y - this.previous.y;
if (vleft < 0) {
this.left = 0;
} else if (vleft > window.innerWidth - this.width) {
this.left = window.innerWidth - this.width;
} else {
this.left = vleft;
}
if (vtop < 0) {
this.top = 0;
} else if (vtop > window.innerHeight - this.height) {
this.top = window.innerHeight - this.height;
} else {
this.top = vtop;
}
this.show();
return true;
}
default () {
this.container.style.left = `${this.original.left}px`;
this.container.style.top = `${this.original.top}px`;
}
/*
panel with a higher z index will interupt drawing
therefore if panel is not displaying, set it with a lower z index that canvas
change index doesn't work, if panel is hiding, then we move it out
hide: record current position, move panel out
show: assign to recorded position
notice this position has nothing to do panel drag movement
they cannot share the same variable
*/
hide() {
// move to the right bottom conner
this.container.style.left = `${window.screen.width}px`;
this.container.style.top = `${window.screen.height}px`;
}
show() {
this.container.style.left = `${this.left}px`;
this.container.style.top = `${this.top}px`;
}
}
// end of import
class DotButton{
constructor(
width_px,
styles, // mainly pos, padding and margin, e.g. {top: 0, left: 0, margin: 0},
color,
color_hover,
border, // boolean
border_dismiss, // boolean: dismiss border when hover
){
this.width = width_px;
this.styles = styles;
this.color = color;
this.color_hover = color_hover;
this.border = border;
this.border_dismiss = border_dismiss;
}
create(_styles=null){
var el = document.createElement('div');
Object.keys(this.styles).forEach(kk=>{
el.style[kk] = `${this.styles[kk]}px`;
});
if(_styles){
Object.keys(_styles).forEach(kk=>{
el.style[kk] = `${this.styles[kk]}px`;
});
}
el.style.width = `${this.width}px`
el.style.height = `${this.width}px`
el.style.position = 'absolute';
el.style.left = `${this.left_px}px`;
el.style.top = `${this.top_px}px`;
el.style.background = this.color;
if(this.border){
el.style.border = '1px solid';
}
el.style.borderRadius = `${this.width}px`;
el.addEventListener('mouseenter', ()=>{
el.style.background = this.color_hover;
if(this.border_dismiss){
el.style.border = `1px solid ${this.color_hover}`;
}
});
el.addEventListener('mouseleave', ()=>{
el.style.background = this.color;
if(this.border_dismiss){
el.style.border = '1px solid';
}
});
return el;
}
}
function cursor_hover(el, default_cursor, to_cursor){
el.addEventListener('mouseenter', function(){
this.style.cursor = to_cursor;
}.bind(el));
el.addEventListener('mouseleave', function(){
this.style.cursor = default_cursor;
}.bind(el));
}
class FlexPanel extends MoveablePanel{
constructor(
parent_el,
top_px,
left_px,
width_px,
height_px,
background,
handle_width_px,
coner_vmin_ratio,
button_width_px,
button_margin_px,
){
super(
(()=>{
var el = document.createElement('div');
render_element(
{
position: 'fixed',
top: `${top_px}px`,
left: `${left_px}px`,
width: `${width_px}px`,
height: `${height_px}px`,
background: background,
},
el,
);
return el;
})(), // iife returns a container (panel el)
new DotButton(button_width_px, {top: 0, right: 0, margin: button_margin_px}, 'green', 'lightgreen', false, false).create(), // draggable
left_px, // left
top_px, // top
);
this.draggable.addEventListener('mousedown', e => {
e.preventDefault();
this.mousedown(e);
});
this.draggable.addEventListener('mousemove', e => {
e.preventDefault();
this.mousemove(e);
});
this.draggable.addEventListener('mouseup', e => {
e.preventDefault();
this.mouseupleave(e);
});
this.draggable.addEventListener('mouseleave', e => {
e.preventDefault();
this.mouseupleave(e);
});
this.parent_el = parent_el;
this.background = background;
// parent
this.width = width_px;
this.height = height_px;
this.handle_width_px = handle_width_px;
this.coner_vmin_ratio = coner_vmin_ratio;
this.panel_el = document.createElement('div');
// styles that won't change
this.panel_el.style.position = 'absolute';
this.panel_el.style.top = `${this.handle_width_px}px`;
this.panel_el.style.left = `${this.handle_width_px}px`;
this.panel_el.style.background = this.background;
this.handles = [
this.handle_top,
this.handle_left,
this.handle_bottom,
this.handle_right,
this.handle_lefttop,
this.handle_topleft,
this.handle_topright,
this.handle_righttop,
this.handle_rightbottom,
this.handle_bottomright,
this.handle_bottomleft,
this.handle_leftbottom,
] = Array.from({length: 12}, i => document.createElement('div'));
this.handles.forEach(el=>{
el.style.position = 'absolute';
});
this.handle_topleft.style.top = '0';
this.handle_topleft.style.left = `${this.handle_width_px}px`;
this.handle_righttop.style.right = '0';
this.handle_righttop.style.top = `${this.handle_width_px}px`;
this.handle_bottomright.style.bottom = '0';
this.handle_bottomright.style.right = `${this.handle_width_px}px`;
this.handle_leftbottom.style.left = '0';
this.handle_leftbottom.style.bottom = `${this.handle_width_px}px`;
this.handle_lefttop.style.left = '0';
this.handle_lefttop.style.top = '0';
this.handle_topright.style.top = '0';
this.handle_topright.style.right = '0';
this.handle_rightbottom.style.right = '0';
this.handle_rightbottom.style.bottom = '0';
this.handle_bottomleft.style.bottom = '0';
this.handle_bottomleft.style.left = '0';
this.update_ratio();
[
'ns-resize', // |
'ew-resize', // -
'ns-resize', // |
'ew-resize', // -
'nwse-resize', // \
'nwse-resize', // \
'nesw-resize', // /
'nesw-resize', // /
'nwse-resize', // \
'nwse-resize', // \
'nesw-resize', // /
'nesw-resize', // /
].map((dd, ii)=>{
cursor_hover(this.handles[ii], 'default', dd);
});
this.vtop = this.top;
this.vleft = this.left;
this.vwidth = this.width;
this.vheight = this.height;
this.update_ratio();
this.handles.forEach(el=>{
this.container.appendChild(el);
});
cursor_hover(this.draggable, 'default', 'move');
this.panel_el.appendChild(this.draggable);
this.container.appendChild(this.panel_el);
this.parent_el.appendChild(this.container);
[
this.edgemousedown,
this.verticalmousemove,
this.horizontalmousemove,
this.nwsemousemove,
this.neswmousemove,
this.edgemouseupleave,
] = [
this.edgemousedown.bind(this),
this.verticalmousemove.bind(this),
this.horizontalmousemove.bind(this),
this.nwsemousemove.bind(this),
this.neswmousemove.bind(this),
this.edgemouseupleave.bind(this),
];
this.handle_top.addEventListener('mousedown', e=>{this.edgemousedown(e, 'top')});
this.handle_left.addEventListener('mousedown', e=>{this.edgemousedown(e, 'left')});
this.handle_bottom.addEventListener('mousedown', e=>{this.edgemousedown(e, 'bottom')});
this.handle_right.addEventListener('mousedown', e=>{this.edgemousedown(e, 'right')});
this.handle_lefttop.addEventListener('mousedown', e=>{this.edgemousedown(e, 'lefttop')});
this.handle_topleft.addEventListener('mousedown', e=>{this.edgemousedown(e, 'topleft')});
this.handle_topright.addEventListener('mousedown', e=>{this.edgemousedown(e, 'topright')});
this.handle_righttop.addEventListener('mousedown', e=>{this.edgemousedown(e, 'righttop')});
this.handle_rightbottom.addEventListener('mousedown', e=>{this.edgemousedown(e, 'rightbottom')});
this.handle_bottomright.addEventListener('mousedown', e=>{this.edgemousedown(e, 'bottomright')});
this.handle_bottomleft.addEventListener('mousedown', e=>{this.edgemousedown(e, 'bottomleft')});
this.handle_leftbottom.addEventListener('mousedown', e=>{this.edgemousedown(e, 'leftbottom')});
this.handle_top.addEventListener('mousemove', this.verticalmousemove);
this.handle_left.addEventListener('mousemove', this.horizontalmousemove);
this.handle_bottom.addEventListener('mousemove', this.verticalmousemove);
this.handle_right.addEventListener('mousemove', this.horizontalmousemove);
this.handle_lefttop.addEventListener('mousemove', this.nwsemousemove);
this.handle_topleft.addEventListener('mousemove', this.nwsemousemove);
this.handle_topright.addEventListener('mousemove', this.neswmousemove);
this.handle_righttop.addEventListener('mousemove', this.neswmousemove);
this.handle_rightbottom.addEventListener('mousemove', this.nwsemousemove);
this.handle_bottomright.addEventListener('mousemove', this.nwsemousemove);
this.handle_bottomleft.addEventListener('mousemove', this.neswmousemove);
this.handle_leftbottom.addEventListener('mousemove', this.neswmousemove);
this.handle_top.addEventListener('mouseup', e=>{this.verticalmousemove(e); this.edgemouseupleave()});
this.handle_left.addEventListener('mouseup', e=>{this.horizontalmousemove(e); this.edgemouseupleave()});
this.handle_bottom.addEventListener('mouseup', e=>{this.verticalmousemove(e); this.edgemouseupleave()});
this.handle_right.addEventListener('mouseup', e=>{this.horizontalmousemove(e); this.edgemouseupleave()});
this.handle_lefttop.addEventListener('mouseup', e=>{this.nwsemousemove(e); this.edgemouseupleave()});
this.handle_topleft.addEventListener('mouseup', e=>{this.nwsemousemove(e); this.edgemouseupleave()});
this.handle_topright.addEventListener('mouseup', e=>{this.neswmousemove(e); this.edgemouseupleave()});
this.handle_righttop.addEventListener('mouseup', e=>{this.neswmousemove(e); this.edgemouseupleave()});
this.handle_rightbottom.addEventListener('mouseup', e=>{this.nwsemousemove(e); this.edgemouseupleave()});
this.handle_bottomright.addEventListener('mouseup', e=>{this.nwsemousemove(e); this.edgemouseupleave()});
this.handle_bottomleft.addEventListener('mouseup', e=>{this.neswmousemove(e); this.edgemouseupleave()});
this.handle_leftbottom.addEventListener('mouseup', e=>{this.neswmousemove(e); this.edgemouseupleave()});
this.handle_top.addEventListener('mouseleave', this.edgemouseupleave);
this.handle_left.addEventListener('mouseleave', this.edgemouseupleave);
this.handle_bottom.addEventListener('mouseleave', this.edgemouseupleave);
this.handle_right.addEventListener('mouseleave', this.edgemouseupleave);
this.handle_lefttop.addEventListener('mouseleave', this.edgemouseupleave);
this.handle_topleft.addEventListener('mouseleave', this.edgemouseupleave);
this.handle_topright.addEventListener('mouseleave', this.edgemouseupleave);
this.handle_righttop.addEventListener('mouseleave', this.edgemouseupleave);
this.handle_rightbottom.addEventListener('mouseleave', this.edgemouseupleave);
this.handle_bottomright.addEventListener('mouseleave', this.edgemouseupleave);
this.handle_bottomleft.addEventListener('mouseleave', this.edgemouseupleave);
this.handle_leftbottom.addEventListener('mouseleave', this.edgemouseupleave);
}
// box size change triggers corner handler size change
update_ratio(){
this.container.style.top = `${this.vtop}px`;
this.container.style.left = `${this.vleft}px`;
this.container.style.width = `${this.vwidth}px`;
this.container.style.height = `${this.vheight}px`;
this.panel_el.style.width = `${this.vwidth - 2 * this.handle_width_px}px`;
this.panel_el.style.height = `${this.vheight - 2 * this.handle_width_px}px`;
this.ratio = this.vwidth < this.vheight ? this.coner_vmin_ratio * this.vwidth : this.coner_vmin_ratio * this.vheight;
[
this.handle_top,
this.handle_bottom,
].forEach(el=>{
el.style.width = `${this.vwidth - 2 * this.ratio}px`;
el.style.height = `${this.handle_width_px}px`;
});
[
this.handle_left,
this.handle_right,
].forEach(el=>{
el.style.height = `${this.vheight - 2 * this.ratio}px`;
el.style.width = `${this.handle_width_px}px`;
});
this.handle_top.style.top = `0`;
this.handle_top.style.left = `${this.ratio}px`;
this.handle_left.style.top = `${this.ratio}px`;
this.handle_left.style.left = `0`;
this.handle_bottom.style.bottom = `0`;
this.handle_bottom.style.right = `${this.ratio}px`;
this.handle_right.style.bottom = `${this.ratio}px`;
this.handle_right.style.right = `0`;
[
this.handle_topright,
this.handle_bottomleft,
].forEach(el=>{
el.style.width = `${this.ratio}px`;
el.style.height = `${this.handle_width_px}px`;
});
[
this.handle_lefttop,
this.handle_rightbottom,
].forEach(el=>{
el.style.width = `${this.handle_width_px}px`;
el.style.height = `${this.ratio}px`;
});
[
this.handle_topleft,
this.handle_bottomright,
].forEach(el=>{
el.style.width = `${this.ratio - this.handle_width_px}px`;
el.style.height = `${this.handle_width_px}px`;
});
[
this.handle_righttop,
this.handle_leftbottom,
].forEach(el=>{
el.style.height = `${this.handle_width_px}px`;
el.style.width = `${this.ratio - this.handle_width_px}px`;
});
}
edgemousedown(e, flag){
this.previous = oMousePos(e);
this.flag = flag;
this.drag = true;
}
verticalmousemove(e){
if(this.drag){
// -
this.mouse = oMousePos(e);
var ydif = this.mouse.y - this.previous.y;
switch(this.flag){
case 'top':
this.vtop = this.top + ydif;
this.vheight = this.height - ydif;
this.vleft = this.left;
this.vwidth = this.width;
break;
case 'bottom':
this.vheight = this.height + ydif;
this.vtop = this.top;
this.vleft = this.left;
this.vwidth = this.width;
break;
}
this.update_ratio();
}
}
horizontalmousemove(e){
if(this.drag){
// |
this.mouse = oMousePos(e);
var xdif = this.mouse.x - this.previous.x;
switch(this.flag){
case 'left':
this.vleft = this.left + xdif;
this.vwidth = this.width - xdif;
this.vtop = this.top;
this.vheight = this.height;
break;
case 'right':
this.vwidth = this.width + xdif;
this.vtop = this.top;
this.vleft = this.left;
this.vheight = this.height;
break;
}
this.update_ratio();
}
}
nwsemousemove(e){
if(this.drag){
// \
this.mouse = oMousePos(e);
var ydif = this.mouse.y - this.previous.y;
var xdif = this.mouse.x - this.previous.x;
switch(this.flag){
case 'topleft':
this.vleft = this.left + xdif;
this.vtop = this.top + ydif;
this.vwidth = this.width - xdif;
this.vheight = this.height - ydif;
break;
case 'lefttop':
this.vleft = this.left + xdif;
this.vtop = this.top + ydif;
this.vwidth = this.width - xdif;
this.vheight = this.height - ydif;
break;
case 'bottomright':
this.vwidth = this.width + xdif;
this.vheight = this.height + ydif;
this.vtop = this.top;
this.vleft = this.left;
break;
case 'rightbottom':
this.vwidth = this.width + xdif;
this.vheight = this.height + ydif;
this.vtop = this.top;
this.vleft = this.left;
break;
}
this.update_ratio();
}
}
neswmousemove(e){
if(this.drag){
// /
this.mouse = oMousePos(e);
var ydif = this.mouse.y - this.previous.y;
var xdif = this.mouse.x - this.previous.x;
switch(this.flag){
case 'topright':
this.vtop = this.top + ydif;
this.vwidth = this.width + xdif;
this.vheight = this.height - ydif;
this.vleft = this.left;
break;
case 'righttop':
this.vtop = this.top + ydif;
this.vwidth = this.width + xdif;
this.vheight = this.height - ydif;
this.vleft = this.left;
break;
case 'bottomleft':
this.vleft = this.left + xdif;
this.vwidth = this.width - xdif;
this.vheight = this.height + ydif;
this.vtop = this.top;
break;
case 'leftbottom':
this.vleft = this.left + xdif;
this.vwidth = this.width - xdif;
this.vheight = this.height + ydif;
this.vtop = this.top;
break;
}
this.update_ratio();
}
}
edgemouseupleave(){
this.drag = false;
this.top = this.vtop;
this.left = this.vleft;
this.width = this.vwidth;
this.height = this.vheight;
}
mouseupleave(e){
if(super.mouseupleave(e)){
this.vtop = this.top;
this.vleft = this.left;
}
}
}
var fp = new FlexPanel(
document.body, // parent div container
20, // top margin
20, // left margin
200, // width
150, // height
'lightgrey', // background
20, // handle height when horizontal; handle width when vertical
0.2, // edge up and left resize bar width : top resize bar width = 1 : 5
35, // green move button width and height
2, // button margin
);
/*
this method creates an element for you
which you don't need to pass in a selected element
to manipuate dom element
fp.container -> entire panel
fp.panel_el -> inside panel
*/
Achieving functionalities fully requires a lot of hard coding. Please refer to the documentation, it will show you how to use each class as element.

const onMouseDownEvent=(ev: React.DragEvent)=>{
let imgElem = (ev.target as HTMLImageElement);
let childElem = (ev.currentTarget && ev.currentTarget.childNodes && ev.currentTarget.childNodes[0]);
let original_height = parseFloat(getComputedStyle(imgElem, null).getPropertyValue('height').replace('px', ''));
let original_width = parseFloat(getComputedStyle(imgElem, null).getPropertyValue('width').replace('px', ''));
let original_Y = imgElem.getBoundingClientRect().top;
let original_X = imgElem.getBoundingClientRect().right;
ev.preventDefault();
var original_mouse_y = ev.pageY;
var original_mouse_x = ev.pageX;
document.addEventListener('mousemove', resize);
document.addEventListener('mouseup', stopResize);
function resize(mouseMoveEvent) {
const height = original_height + (mouseMoveEvent.pageY - original_mouse_y);
const width = original_width + (mouseMoveEvent.pageX - original_mouse_x);
imgElem.style.height = height + 'px';
mouseMoveEvent.target.childNodes[0].innerHTML = imgElem.style.height;
imgElem.style.width = width + 'px';
mouseMoveEvent.target.childNodes[0].innerHTML = imgElem.style.width;
}
function stopResize() {
document.removeEventListener('mousemove', resize)
}
}
<div onMouseDown={onMouseDownEvent} id="imgInCanvas" onDragStart={ onDragStartFromContainer } draggable="true"/>

I'm not sure if this is what you are looking for, but you can always use CSS resize property and add it to an element using javascript; For example lets say you have a div element with the id myDiv and you want to make it resizable:
document.getElementById("myDiv").style.resize = "both";
here's the related links:
Style resize Property
CSS resize Property

var resizeHandle = document.getElementById('resizable');
var box = document.getElementById('resize');
resizeHandle.addEventListener('mousedown', initialiseResize, false);
function initialiseResize(e) {
window.addEventListener('mousemove', startResizing, false);
window.addEventListener('mouseup', stopResizing, false);
}
function stopResizing(e) {
window.removeEventListener('mousemove', startResizing, false);
window.removeEventListener('mouseup', stopResizing, false);
}
function startResizing(e) {
box.style.width = (e.clientX) + 'px';
box.style.height = (e.clientY) + 'px';
}
function startResizing(e) {
box.style.width = (e.clientX - box.offsetLeft) + 'px';
box.style.height = (e.clientY - box.offsetTop) + 'px';
}
#resize {
position: relative;
width: 130px;
height: 130px;
border: 2px solid blue;
color: white;
}
#resizable {
background-color: white;
width: 10px;
height: 10px;
cursor: se-resize;
position: absolute;
right: 0;
bottom: 0;
}
<div id="resize">
<div id="resizable">
</div>