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?

Pac Man

Apenas no ano de 1982, o clássico Pac Man vendeu mais de 400 mil máquinas de fliperama em todo o mundo e recebeu cerca de 7 bilhões de moedas nestas máquinas. Saiba mais.

Space Invaders

A partida mais longa do clássico Space Invaders durou incríveis 38 horas e 32 minutos e esta façanha foi conseguida por um jogador de apenas 12 anos! O jogo, claro, podia ser pausado para alimentação e descanso, mas ainda assim o recorde, estabelecido no dia 02/09/1980, ainda não foi quebrado. Saiba mais.

Final Fantasy X

O jogo Final Fantasy X para o Sony Playstation 2 vendeu, apenas no dia do seu lançamento, 1.455.732 cópias, estabelecendo um recorde de vendagem para as primeiras 24 horas de um game. Méritos da SquareSoft, que desenvolveu um excelente produto!

Mortal Kombat - O Filme

O filme Mortal Kombat, inspirado no jogo de mesmo nome, faturou 23 milhões de dólares apenas no fim de semana de estreia nos EUA. Ainda sobre este título de sucesso, outra cifra que impressiona é o faturamento ao longo do primeiro ano: 1 bilhão de dólares no mundo todo.

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.