HTML Drag and Drop
Antes, Geolocation pedia coordenadas após permissão. Esta lição deixa as coordenadas e apresenta HTML Drag and Drop: marcar o que se arrasta, levar carga pequena com dataTransfer e decidir o drop. Âmbito prático — draggable, preventDefault, mover ou etiquetar — não bibliotecas sortable nem apps de upload.
Por que drag and drop num curso HTML
Principiantes querem arrastar um cartão para uma caixa. O DnD nativo é a primeira API habitual. Após Geolocation, a divisão é outra: HTML marca fontes; JS possui eventos e o significado do drop.
Resposta direta
1) draggable="true". 2) setData no dragstart. 3) preventDefault no dragover. 4) No drop, getData e altere DOM/UI. 5) Sem etiqueta dropzone especial. 6) Se importar, caminho com botão/teclado.
📊 dragstart vs dragover vs drop
| Topic | dragstart | dragover | drop |
|---|---|---|---|
| Typical role | Start drag; set dataTransfer | Allow drop (preventDefault) | Apply the result |
| Runs on | Draggable source | Potential target (often) | Drop target |
| Must preventDefault? | Usually no | Yes — so drop can fire | Yes — avoid default navigation quirks |
| Beginner payload | setData("text/plain", id) | — | getData + move/label |
| This course depth | Required | Required | Required (simple move/label) |
Mini demo de mover para a zona
Caixa azul arrastável; ao largar entra na zona. Sem preventDefault no dragover o drop costuma falhar.
<div id="item" draggable="true" style="padding:8px;background:#cdf;width:120px;">Drag me</div>
<div id="zone" style="margin-top:12px;padding:24px;border:2px dashed #666;">Drop here</div>
<script>
const item = document.getElementById("item");
const zone = document.getElementById("zone");
item.addEventListener("dragstart", function (e) {
e.dataTransfer.setData("text/plain", "item");
});
zone.addEventListener("dragover", function (e) {
e.preventDefault();
});
zone.addEventListener("drop", function (e) {
e.preventDefault();
zone.appendChild(item);
});
</script>
Ler as chamadas de movimento
- draggable inicia o gesto
- dragstart põe dataTransfer
- dragover + preventDefault permite drop
- drop altera o DOM
- Ao contrário de Geolocation: sem coordenadas do dispositivo
- Mantenha a demo pequena
Demo de carga dataTransfer
Por vezes não move o mesmo nó — leva um texto e mostra-o ao largar quando várias fontes partilham um alvo.
<p id="a" draggable="true" style="display:inline-block;padding:6px;background:#fec;margin-right:8px;">Alpha</p>
<p id="b" draggable="true" style="display:inline-block;padding:6px;background:#cfe;margin-right:8px;">Beta</p>
<div id="tray" style="margin-top:12px;padding:16px;border:2px dashed #444;">Drop a label here</div>
<pre id="note"></pre>
<script>
const tray = document.getElementById("tray");
const note = document.getElementById("note");
function arm(id, label) {
document.getElementById(id).addEventListener("dragstart", function (e) {
e.dataTransfer.setData("text/plain", label);
});
}
arm("a", "Alpha");
arm("b", "Beta");
tray.addEventListener("dragover", function (e) {
e.preventDefault();
});
tray.addEventListener("drop", function (e) {
e.preventDefault();
note.textContent = "Dropped: " + e.dataTransfer.getData("text/plain");
});
</script>
Ler a ideia dataTransfer
- setData/getData movem uma string curta
- text/plain é amigável para principiantes
- Várias fontes, um alvo
- Não é produto de upload
- Não é Geolocation
- A seguir: web workers
Quando usar DnD
- Cartão para zona clara: bom fit
- Ação crítica sem alternativa: mau
- Guardar tema: Web Storage
- GPS: foi Geolocation
- Kanban completo: fora desta intro
Prática — arraste, largue e etiquete
- Teste a demo de mover.
- Remova preventDefault um momento e veja a falha.
- Teste a demo dataTransfer.
- Opcional: botão sem arrastar.
- Frase: Geolocation lê coordenadas; DnD move ou etiqueta.
- Prefira janela real do browser.
- Antevisão: web workers.
Erros fáceis
- Esquecer preventDefault no dragover
- UI só DnD sem alternativa
- Esperar etiqueta dropzone
- Confundir com Geolocation
- Abusar de DnD em vez de um botão
- Tratar a intro como curso sortable completo
Resumo
- DnD usa draggable, dataTransfer e os três eventos
- preventDefault no dragover costuma ser necessário
- HTML marca fontes; o script define o drop
- Ofereça caminho sem arrastar quando importa
- Geolocation eram coordenadas; esta lição mover/etiquetar com ponteiro
- Seguinte: web workers
🧠 Teste Seu Conhecimento
Teste Seu Conhecimento
Desafie-se com este questionário interativo e veja o quão bem você entende o tópico
📝 Instruções
- Leia cada pergunta cuidadosamente
- Selecione a melhor resposta para cada pergunta
- Você pode refazer o quiz quantas vezes quiser
- Seu progresso será mostrado no topo