HTML Drag and Drop
Antes, Geolocation pedía coordenadas tras permiso. Esta lección deja las coordenadas y presenta HTML Drag and Drop: marcar qué se arrastra, llevar una carga pequeña con dataTransfer y decidir el drop. Alcance práctico — draggable, preventDefault, mover o etiquetar — no librerías sortable ni apps de subida.
Por qué drag and drop en un curso HTML
Los principiantes quieren arrastrar una tarjeta a una caja. El DnD nativo es la primera API habitual. Tras Geolocation, la división es otra: HTML marca fuentes; JS posee eventos y el significado del drop.
Respuesta directa
1) draggable="true". 2) setData en dragstart. 3) preventDefault en dragover. 4) En drop, getData y cambia DOM/UI. 5) No hay etiqueta dropzone especial. 6) Si importa, camino con botón/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 a la zona
Caja azul arrastrable; al soltar entra en la zona. Sin preventDefault en dragover el drop suele fallar.
<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>
Leer las llamadas de movimiento
- draggable inicia el gesto
- dragstart pone dataTransfer
- dragover + preventDefault permite drop
- drop cambia el DOM
- A diferencia de Geolocation: sin coordenadas del dispositivo
- Mantén la demo pequeña
Demo de carga dataTransfer
A veces no mueves el mismo nodo — llevas un texto y lo muestras al soltar cuando varias fuentes comparten un destino.
<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>
Leer la idea dataTransfer
- setData/getData mueven un string corto
- text/plain es amigable para principiantes
- Varias fuentes, un destino
- No es producto de subida de archivos
- No es Geolocation
- Siguiente: web workers
Cuándo usar DnD
- Reordenar tarjeta a zona clara: buen fit
- Acción crítica sin alternativa: malo
- Guardar tema: Web Storage
- GPS: fue Geolocation
- Kanban completo: fuera de esta intro
Práctica — arrastra, suelta y etiqueta
- Prueba la demo de mover.
- Quita preventDefault un momento y observa el fallo.
- Prueba la demo dataTransfer.
- Opcional: botón sin arrastre.
- Frase: Geolocation lee coordenadas; DnD mueve o etiqueta.
- Prefiere ventana real del navegador.
- Vista previa: web workers.
Errores fáciles
- Olvidar preventDefault en dragover
- UI solo DnD sin alternativa
- Esperar etiqueta dropzone
- Confundir con Geolocation
- Abusar de DnD frente a un botón
- Tomar la intro como curso sortable completo
Resumen
- DnD usa draggable, dataTransfer y los tres eventos
- preventDefault en dragover suele ser necesario
- HTML marca fuentes; el script define el drop
- Ofrece camino sin arrastre cuando importe
- Geolocation eran coordenadas; esta lección mover/etiquetar con puntero
- Siguiente: web workers
🧠 Pon a Prueba tu Conocimiento
Pon a Prueba tu Conocimiento
Ponte a prueba con este cuestionario interactivo y descubre qué tan bien entiendes el tema
📝 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