Блог

Создать код Div:

 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)
})

 

Изменение размера кода:

  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;
         }
     }
 

Я хочу изменить размер и перетащить созданный div и нарисовать прямоугольник, похожий на книжную полку.
Все они работают отдельно, но я не мог их объединить.

Я могу создать div, но мои слушатели не работают.

Вам нужно использовать чистый javascript.

Я бы выполнил изменение размера с помощью свойства CSS resize и прослушал события изменения размера из js. https://usefulangle.com/post/319/javascript-detect-element-resize