Crear código de división:

 const BtnAdd = document.querySelector(".olustur"); const DivContainer = document.getElementById("DivContainer"); BtnAdd.addEventListener("click", Olustur); function Olustur() { const newDiv = document.createElement("div"); const newResizer = document.createElement("div"); newDiv.classList.add("item") newResizer.classList.add("resizer") newResizer.classList.add("se") DivContainer.appendChild(newDiv); newDiv.appendChild(newResizer); } var elements = document.querySelectorAll(".resizer") elements.forEach(element => { element.addEventListener("mousedown",mousedown) })

Código de cambio de tamaño:

 let currentResizer; function mousedown(e){ currentResizer=e.target; isResizing = true; let prevX = e.clientX; let prevY = e.clientY; window.addEventListener("mousemove",mousemove); window.addEventListener("mouseup",mouseup); function mousemove(e){ const rect = el.getBoundingClientRect(); if(currentResizer.classList.contains('se')){ el.style.width=rect.width - (prevX - e.clientX) + "px"; el.style.height=rect.height - (prevY - e.clientY) + 'px'; } prevX=e.clientX; prevY=e.clientY; } function mouseup(){ window.removeEventListener("mousemove",mousemove); window.removeEventListener("mouseup",mouseup); isResizing=false; } }

Quiero cambiar el tamaño y arrastrar el div creado y dibujar un rectángulo como una estantería. Todos funcionan por separado pero no pude combinarlos.

Puedo crear div pero mis oyentes no funcionan.

Necesitas usar javascript puro.