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?

Computadores de 1,5 tonelada

Em 1949 a revista Popular Mechanics fez uma previsão para o futuro, dizendo: "Um dia os computadores pesarão menos do que 1,5 tonelada". E pensar que temos smartphones capazes de realizar milhões de vezes mais operações do que os computadores daquela época.

Mouse

O mouse foi criado em 9 de dezembro de 1968, por um americano chamado Douglas Engelbart, que o batizou de "XY Position Indicator for a Display System". Conheça a história do mouse clicando aqui.

Tetris

O título Tetris detém o recorde de jogo mais adaptado de todos os tempos. No total foram mais de 60 plataformas diferentes que receberam alguma versão do quebra-cabeças criado por Alexey Pajitnov. Conheça mais sobre este incrível jogo clicando aqui.

Ultima Online

Criar um jogo é muito mais complexo do que parece. São milhares, às vezes, milhões de linhas de código. Isso não é exagero! Apenas o jogo Ultima Online possui 6.006.313 linhas de programação, totalizando 25.103.295 palavras

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.