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?

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.

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.

Donkey Kong

A empresa Universal City Studios, detentora dos direitos autorais do King Kong, processou a Nintendo logo após o lançamento de Donkey Kong, pois segundo ela, o game violava os seus direitos. Ela venceu o processo e recebeu da Nintendo uma indenização de quase 2 milhões de dólares.

Máquina de Pascal

A Máquina de Pascal, criada em 1642 pelo filósofo, físico e matemático francês Blaise Pascal, é reconhecida como o primeiro computador do mundo e ele foi criado com o objetivo de calcular impostos. Saiba mais.

Ábaco

O ábaco é o dispositivo de cálculo mais antigo construído e conhecido pelo homem. Suas formas mais primitivas datam de 400 a.C. e eles foram encontrados na China e na Babilônia. Para saber mais sobre a história dos computadores, clique aqui.