Aula 59 — Introdução ao Drag and Drop

Ao longo deste bloco, aprendemos como funcionam os eventos, mouse, teclado e formulários.

Agora vamos fechar com um tipo especial de interação:

arrastar e soltar elementos na interface.

Esse recurso é muito usado em listas, kanbans, uploads e interfaces modernas.

🎯 Objetivo da aula

Ao final desta aula, você será capaz de:

• Entender o conceito de Drag and Drop
• Conhecer os principais eventos envolvidos
• Tornar um elemento arrastável
• Permitir áreas de soltura (drop)
• Criar uma interação simples de arrastar e soltar

O que é Drag and Drop?

Drag and Drop é a capacidade de:

• Arrastar um elemento
• Movê-lo pela tela
• Soltá-lo em outra área

O navegador fornece eventos específicos para isso.

Principais eventos de Drag and Drop

Os eventos mais importantes são:

• dragstart → início do arraste
• dragend → fim do arraste
• dragover → elemento sendo arrastado sobre uma área
• drop → elemento solto

Tornando um elemento arrastável

Para permitir que um elemento seja arrastado, usamos o atributo draggable.

 <div id="item" draggable="true">Arraste-me</div> 

Detectando o início do arraste

  const item = document.getElementById("item");
  item.addEventListener("dragstart", () => 
  {
    console.log("Arraste inicado");
  });

 console.log("Arraste iniciado"); // Saída ao começar a arrastar 

Criando uma área de soltura (drop zone)

HTML:

 <div id="zona">Solte aqui</div> 

Por padrão, o navegador não permite soltar elementos. Precisamos permitir isso com dragover.

 
  const zona = document.getElementById("zona");
  zona.addEventListener("dragover", (event) => 
  {
    event.preventDefault();
  });

Soltando o elemento

 
  zona.addEventListener("drop", () => 
  { 
    zona.appendChild(item); 
    console.log("Elemento solto"); 
  }); 

 
    console.log("Elemento solto"); // Saída ao soltar o item 

Fluxo mental do Drag and Drop

• Elemento é marcado como arrastável
• dragstart dispara
• dragover permite a soltura
• drop finaliza a ação

Exemplo simples completo

 
      item.addEventListener("dragstart", () => 
      { 
        item.classList.add("arrastando"); 
      });
      zona.addEventListener("dragover", (event) => 
      {
        event.preventDefault();
      });
      zona.addEventListener("drop", () => 
      {
        zona.appendChild(item);
        item.classList.remove("arrastando");
      });

Limitações e observações

• Drag and Drop nativo é mais limitado no mobile
• Para projetos complexos, existem bibliotecas
• O conceito é mais importante que a API em si

Com isso, encerramos o bloco de Eventos no JavaScript. Agora você entende eventos como um sistema completo — e não como truques soltos 🚀