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
O mais importante é entender o fluxo de eventos, não decorar nomes.

Resumo da aula para nunca mais esquecer

  • Drag and Drop permite arrastar e soltar elementos
  • Usa eventos específicos do navegador
  • dragstart inicia o processo
  • dragover permite a soltura
  • drop finaliza a ação

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

HARDWARE

Entendendo o seu computador

O que há dentro do meu computador?

Existem alguns componentes fundamentais presentes dentro do seu computador e é muito importante que você conheça um pouco sobre eles, seja para argumentar com algum vendedor durante a compra de um novo PC ou para identificar alguma atitude desleal de algum técnico que esteja te passando um orçamento para reparo. Na seção Raio-X aqui do Contém Bits você pode conhecer e entender mais detalhadamente sobre cada componente, ou também pode clicar abaixo no componente que deseja, para conhecê-lo melhor.

  • Gabinetes

  • Placas-Mãe

  • Processadores

  • Memória

  • Fontes

  • Drives Ópticos

  • Discos Rígidos

  • SSD

  • Placas de Som

  • Placas de Vídeo

Você Sabia?

Música tema do Blanka

Até a primeira metade dos anos 90 era bastante comum que as trilhas sonoras dos games fossem criadas por mulheres e a responsável pelas músicas do clássico Street Fighter 2 foi Yoko Shimomura. Segundo ela, o ritmo "Tararirarin" da música tema do personagem Blanka, do Brasil, veio à sua cabeça enquanto ela estava no trem a caminho da Capcom.

PC com barulho?

Excesso de barulho dentro do seu gabinete, principalmente logo que você o liga, pode ser sintoma de problemas nas ventoinhas, que podem precisar ser limpas ou trocadas. Entre em contato com um técnico de sua confiança e verifique isso o quanto antes.

Civilization

A empresa Take-Two pagou à Infogrames mais de 22 milhões de dólares pelos direitos de Civilization, em novembro de 1994. Ainda sobre este título, Sid Meier, um dos seus fundadores, é o profissional da área dos games mais premiado em todo o mundo.

Senhas

Digitar senhas em computadores de uso coletivo é extremamente perigoso, pois além de softwares de monitoramento, existem dispositivos de hardware que podem capturar suas senhas. Evite ao máximo acessar sites de bancos a partir destes computadores. Veja mais aqui.

Mario em Donkey Kong

O personagem Mario surgiu pela primeira vez no mundo dos games em um jogo chamado Donkey Kong, lançado em 1981. Mario, que naquela época se chamava Jumpman, não era o personagem principal do jogo, mas ele se tornaria um dos mais famosos personagens do mundo dos games. Saiba mais.