In Javascript, I can create more than one div tag with a button, and move each one separately with the mouse. However, I can't adjust the size of the divs. I need to be able to adjust the size of each div with the mouse. I want to scale my divs vertically only. I added the codes to https://jsfiddle.net/alikim83/rx15u3no/4/. How can I solve my problem.
<!DOCTYPE HTML>
<html>
<head>
</head>
<body>
<button onclick="olustur()" >Oluştur</button>
<script>
var i=-1;
function olustur() {
i=i+1;
var div;
var mousePosition;
var offset = [0,0];
var isDown = false;
div = document.createElement("div");
div.style.position = "absolute";
div.style.left = "100px";
div.style.top = "100px";
div.style.width = "30px";
div.style.height = "100px";
div.style.background = "red";
div.style.color = "blue";
div.style.resize = "vertical";
div.style.overflow = "auto";
div.setAttribute("id", i);
document.body.appendChild(div);
div.addEventListener('mousedown', function(e) {
isDown = true;
offset = [
div.offsetLeft - e.clientX,
div.offsetTop - e.clientY
];
}, true);
document.addEventListener('mouseup', function() {
isDown = false;
}, true);
document.addEventListener('mousemove', function(event) {
event.preventDefault();
if (isDown) {
mousePosition = {
x : event.clientX,
y : event.clientY
};
div.style.left = (mousePosition.x + offset[0]) + 'px';
div.style.top = (mousePosition.y + offset[1]) + 'px';
}
}, true);
}
</script>
</body>
</html>