Eventos dragover e drop
Defina destinos de soltura válidos e trate o evento drop.
Eventos dragover e drop é uma aula grátis de HTML Academy no CoddyKit. Esta é a aula 2 de 4. Você pode ler a aula completa abaixo gratuitamente — depois pratica ao vivo no navegador com um editor de código integrado e um tutor de IA 24/7. Faz parte do caminho de aprendizado de HTML Academy, e seu progresso é sincronizado entre a web e o app CoddyKit. O curso de HTML Academy inclui 4 aulas no total.
Os destinos de soltura precisam de dois manipuladores
Um destino de soltura precisa tratar tanto o evento de arrastamento sobre o destino (para permitir a soltura) quanto o evento de soltura (para recebê-la). Sem o evento de arrastamento sobre o destino, o navegador se recusa a disparar a soltura porque o comportamento padrão é “nenhum elemento é um destino de soltura”.
preventDefault é obrigatório
No manipulador do evento de arrastamento sobre o destino, você deve chamar e.preventDefault(). Isso cancela o comportamento padrão do navegador, que rejeita a soltura. Sem essa chamada, o cursor permanece como “não permitido” e o evento de soltura nunca é disparado, independentemente do que o usuário faça.
zone.addEventListener("dragover", (e) => {
e.preventDefault();
});
zone.addEventListener("drop", (e) => {
e.preventDefault();
console.log(e.dataTransfer.getData("text/plain"));
});Entrada e saída do arrastamento
O evento de entrada no destino é disparado uma vez quando o cursor entra nele; o evento de saída é disparado uma vez quando o cursor sai. Use-os para alternar um realce visual de “arrastamento sobre o destino”: adicione uma classe ao entrar e remova-a ao sair, para que o usuário veja qual área receberá a soltura.
A saída do arrastamento é disparada para elementos filhos
Uma particularidade sutil: mover o cursor sobre um elemento filho dispara a saída do arrastamento no elemento pai, seguida pela entrada do arrastamento no filho. Use um contador incrementado na entrada e decrementado na saída, removendo o realce apenas quando o contador voltar a zero.
let counter = 0;
zone.addEventListener("dragenter", () => {
counter++;
zone.classList.add("over");
});
zone.addEventListener("dragleave", () => {
counter--;
if (counter === 0) zone.classList.remove("over");
});Configurando dropEffect
Dentro do evento de arrastamento sobre o destino, defina e.dataTransfer.dropEffect = "move" (ou "copy", "link", "none") para controlar o cursor e informar à origem o que acontecerá. O efeito precisa ser compatível com o effectAllowed da origem, caso contrário a soltura será rejeitada.
Lendo dados ao soltar
No manipulador da soltura, chame e.dataTransfer.getData(format) com o mesmo tipo MIME usado por setData (geralmente "text/plain"). Em seguida, localize o elemento pelo id, anexe-o ao destino, atualize um modelo de dados ou faça o que for necessário para a aplicação.
Impedindo o comportamento padrão ao soltar
Você também precisa de e.preventDefault() no manipulador da soltura. Sem isso, o navegador volta ao comportamento nativo — para uma URL solta, isso significa navegar até o link, eliminando imediatamente o estado da sua página.
Soltura a partir da área de trabalho
O navegador converte arquivos arrastados do OS em um evento de soltura com e.dataTransfer.files preenchido. Percorra o FileList e leia cada arquivo com a API de arquivos para oferecer suporte a carregamentos de imagens, visualizadores de arquivos de log ou importadores de documentos.
zone.addEventListener("drop", (e) => {
e.preventDefault();
for (const file of e.dataTransfer.files) {
console.log(file.name, file.size);
}
});Vários tipos em dataTransfer
setData pode armazenar a mesma carga útil em vários tipos MIME: "text/plain" como alternativa, "text/uri-list" para URLs e "application/json" para cargas úteis estruturadas. O destino de soltura escolhe, por meio de getData, o tipo mais completo que entende.
Coordenando com eventos de toque
Navegadores móveis não simulam eventos de arrastamento sobre o destino e de soltura a partir do toque. Para uma experiência unificada, use eventos de ponteiro com detecção manual de colisões ou uma biblioteca que abstraia as diferenças. O DnD nativo do HTML5 deve ser tratado principalmente como recurso para computadores.
Dica de desempenho
O evento de arrastamento sobre o destino é disparado continuamente enquanto o cursor se move — geralmente dezenas de vezes por segundo. Mantenha o manipulador simples: evite consultas caras ao DOM ou leituras de layout dentro dele. Armazene os retângulos em cache na entrada do arrastamento e reutilize-os enquanto o cursor permanecer sobre o destino.
Verificação de conhecimento
Por que o evento de soltura nunca é disparado em um destino até que você chame e.preventDefault() no manipulador do evento de arrastamento sobre o destino?
Resumo
Um destino de soltura funcional escuta o evento de arrastamento sobre o destino (sempre chama preventDefault, definindo dropEffect opcionalmente) e o evento de soltura (chama preventDefault novamente e, em seguida, lê dataTransfer.getData ou dataTransfer.files). Use os eventos de entrada e saída do arrastamento com um contador para o realce e mantenha os manipuladores simples, pois o evento de arrastamento sobre o destino é disparado com muita frequência.
Perguntas Frequentes
A aula “Eventos dragover e drop” é grátis?
Sim — o texto completo de “Eventos dragover e drop” é grátis para ler aqui na web. Para praticá-la interativamente (um editor de código integrado e um tutor de IA 24/7) e desbloquear o restante do curso de HTML Academy, atualize para CoddyKit PRO. O curso de HTML Academy inclui 4 aulas no total.
O que vou aprender em “Eventos dragover e drop”?
Defina destinos de soltura válidos e trate o evento drop. Você pratica HTML Academy com código prático que executa diretamente no navegador, e um tutor de IA 24/7 responde suas dúvidas enquanto trabalha na aula.
Preciso ter experiência prévia para começar HTML Academy?
Nenhuma experiência prévia é necessária. HTML Academy no CoddyKit é estruturado para alunos iniciantes até avançados, então você pode começar aqui ou desde o início e aprender no seu ritmo. Esta é a aula 2 de 4.
Quanto tempo leva a aula “Eventos dragover e drop”?
A maioria das aulas CoddyKit leva cerca de 5–10 minutos. Cada uma é compacta e interativa, então você faz progresso constante e retoma exatamente de onde parou entre web e app.
Posso escrever e executar código nesta aula de HTML Academy?
Sim. Cada aula de HTML Academy inclui um editor de código integrado, então você escreve e executa código real direto no navegador e recebe feedback de IA instantaneamente — nenhuma configuração local necessária.
Todas as aulas deste curso
- Atributo draggable e evento dragstart
- Eventos dragover e drop
- Objeto dataTransfer
- Lista prática com reordenação por arrastar