En Javascript, puedo crear más de una etiqueta div con un botón y mover cada una por separado con el mouse. Sin embargo, no puedo ajustar el tamaño de los divs. Necesito poder ajustar el tamaño de cada div con el mouse. Quiero escalar mis divs solo verticalmente. Agregué los códigos a https://jsfiddle.net/alikim83/rx15u3no/4/ . Como puedo solucionar mi problema.
<!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>