Carregando...
Drag and Drop HTML
draggable + JS.
Resposta direta
preventDefault dragover.
Minimal drag and drop
html
HTML Code
<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", (e) => e.dataTransfer.setData("text/plain", "item"));
zone.addEventListener("dragover", (e) => e.preventDefault());
zone.addEventListener("drop", (e) => {
e.preventDefault();
zone.appendChild(item);
});
</script>Experimente
- colar
- arrastar
- estilo
- teclado
Erros comuns
- sem preventDefault
Resumo
- draggable
- JS
🧠 Teste Seu Conhecimento
Pronto para Começar
Teste Seu Conhecimento
Desafie-se com este questionário interativo e veja o quão bem você entende o tópico
3
Perguntas
70%
Para Passar
∞
Tempo
∞
Tentativas
📝 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