Cargando...
Drag and Drop HTML
HTML draggable; JS drop.
Respuesta directa
dragover preventDefault, drop.
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>Pruébalo
- pegar
- arrastrar
- estilo
- teclado
Errores fáciles
- sin preventDefault
Resumen
- draggable
- JS
- preventDefault
🧠 Pon a Prueba tu Conocimiento
Listo para Empezar
Pon a Prueba tu Conocimiento
Ponte a prueba con este cuestionario interactivo y descubre qué tan bien entiendes el tema
3
Preguntas
70%
Para Aprobar
∞
Tiempo
∞
Intentos
📝 Instrucciones
- Lee cada pregunta cuidadosamente
- Selecciona la mejor respuesta para cada pregunta
- Puedes repetir el quiz tantas veces como quieras
- Tu progreso se mostrará en la parte superior