Empresas
Empregos
  • Sobre nós
  • Soluções
    • Publicação de vagas
      Publique sua vaga e receba candidatos qualificados em 48h.
    • Avaliações de candidatos
      Mais de 500 testes técnicos e psicológicos, mais anti-fraude.
    • Headhunting
      Busca executiva personalizada do início ao fim.
    • Folha de Pagamento + EOR
      Dispersão de folha e EOR em mais de 15 países da LATAM.
  • Preços
  • Empregos

0

238
Visualizações
I want to use resize and drag features in the divs I created

Create Div Code:

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

Resize Code:

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

I wanna resize and drag created div and draw a rectangle like a bookshelf. They all work separately but I couldn't combine them.

I can create div but my listeners don't work.

You need to use pure javascript.

about 4 years ago · Juan Pablo Isaza
1 Respostas
Responde à pergunta

0

I would do the resizing using the CSS resize property, and listen for resize events from js. https://usefulangle.com/post/319/javascript-detect-element-resize

about 4 years ago · Juan Pablo Isaza Relatório
Responde à pergunta
Encontrar trabalhos remotos

Descubra a nova forma de encontrar um emprego!

melhores empregos
Principais categorias de trabalho
Empresas
Postar vaga Preços Comercial
Jurídico
Termos e Condições Política de privacidade
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomende algumas ofertas para mim
Preciso de ajuda