Eventos dragover y drop
Defina destinos de soltado válidos y gestione el evento drop
Eventos dragover y drop es una lección gratuita de HTML Academy en CoddyKit. Esta es la lección 2 de 4. Puedes leer la lección completa abajo gratuitamente — luego la practicas en el navegador con un editor de código integrado y un tutor de IA 24/7. Forma parte de la ruta de aprendizaje de HTML Academy, y tu progreso se sincroniza en la web y la app de CoddyKit. El curso de HTML Academy incluye 4 lecciones en total.
Las zonas de destino necesitan dos controladores
Una zona de destino debe gestionar tanto dragover (para permitir la operación) como drop (para recibirla). Sin dragover, el navegador se niega a emitir drop porque el comportamiento predeterminado es «ningún elemento es una zona de destino».
preventDefault es obligatorio
En el controlador de dragover debe llamar a e.preventDefault(). Esto cancela el comportamiento predeterminado del navegador, que rechaza la operación. Sin esa llamada, el cursor permanece en «no permitido» y el evento drop nunca se emite, haga lo que haga el usuario.
zone.addEventListener("dragover", (e) => {
e.preventDefault();
});
zone.addEventListener("drop", (e) => {
e.preventDefault();
console.log(e.dataTransfer.getData("text/plain"));
});dragenter y dragleave
dragenter se emite una vez cuando el cursor entra en la zona de destino; dragleave se emite una vez cuando sale. Úselos para alternar un resaltado visual de «arrastre sobre la zona»: añada una clase al entrar y quítela al salir para que el usuario vea qué área recibirá el elemento.
dragleave se emite para los elementos secundarios
Una peculiaridad sutil: al mover el cursor sobre un elemento secundario, se emite dragleave en el elemento principal y después dragenter en el secundario. Use un contador que se incremente en dragenter y se reduzca en dragleave; quite el resaltado únicamente cuando el contador vuelva a cero.
let counter = 0;
zone.addEventListener("dragenter", () => {
counter++;
zone.classList.add("over");
});
zone.addEventListener("dragleave", () => {
counter--;
if (counter === 0) zone.classList.remove("over");
});Establecer dropEffect
Dentro de dragover, establezca e.dataTransfer.dropEffect = "move" (o "copy", "link", "none") para controlar el cursor e indicar al elemento de origen qué ocurrirá. El efecto debe ser compatible con effectAllowed del elemento de origen; de lo contrario, la operación se rechaza.
Leer datos en drop
En el controlador de drop, llame a e.dataTransfer.getData(format) con el mismo tipo MIME utilizado por setData (normalmente "text/plain"). Después, localice el elemento por su id, añádalo a la zona de destino, actualice el modelo de datos o haga lo que necesite la aplicación.
Impedir el comportamiento predeterminado en drop
También necesita e.preventDefault() en el controlador de drop. Sin esa llamada, el navegador vuelve a su comportamiento nativo: para una URL soltada, eso significa navegar al enlace, lo que elimina inmediatamente el estado de la página.
Soltar desde el escritorio
El navegador convierte los archivos arrastrados desde el sistema operativo en un evento drop con e.dataTransfer.files rellenado. Recorra el FileList y lea cada archivo con la File API para admitir cargas de imágenes, visores de archivos de registro o importadores de documentos.
zone.addEventListener("drop", (e) => {
e.preventDefault();
for (const file of e.dataTransfer.files) {
console.log(file.name, file.size);
}
});Varios tipos en dataTransfer
setData puede almacenar la misma carga útil con varios tipos MIME: "text/plain" como alternativa, "text/uri-list" para URL y "application/json" para cargas estructuradas. La zona de destino selecciona mediante getData el tipo más completo que entiende.
Coordinarse con los eventos táctiles
Los navegadores móviles no generan dragover/drop a partir de eventos táctiles. Para ofrecer una experiencia unificada, use Pointer Events junto con una detección manual de elementos bajo el cursor, o una biblioteca que abstraiga las diferencias. Es mejor considerar el DnD nativo de HTML5 como una función exclusiva para ordenadores de escritorio.
Consejo de rendimiento
dragover se emite continuamente mientras se mueve el cursor, a menudo decenas de veces por segundo. Mantenga el controlador ligero: evite consultas costosas al DOM o lecturas del diseño dentro de él. Almacene en caché los rectángulos en dragenter y reutilícelos mientras el cursor permanezca sobre la zona de destino.
Comprobación de conocimientos
¿Por qué el evento drop nunca se emite en una zona de destino hasta que llama a e.preventDefault() en el controlador de dragover?
Resumen
Una zona de destino funcional escucha dragover (siempre debe llamar a preventDefault y, opcionalmente, establecer dropEffect) y drop (debe llamar de nuevo a preventDefault y después leer dataTransfer.getData o dataTransfer.files). Use dragenter/dragleave con un contador para el resaltado y mantenga los controladores ligeros, porque dragover se emite con mucha frecuencia.
Preguntas frecuentes
¿La lección «Eventos dragover y drop» es gratis?
Sí — el texto completo de «Eventos dragover y drop» es gratis para leer aquí en la web. Para practicarla de forma interactiva (editor de código integrado y tutor de IA 24/7) y desbloquear el resto del curso de HTML Academy, actualiza a CoddyKit PRO. El curso de HTML Academy incluye 4 lecciones en total.
¿Qué aprenderé en «Eventos dragover y drop»?
Defina destinos de soltado válidos y gestione el evento drop Practicas HTML Academy con código real que ejecutas directamente en el navegador, y un tutor de IA 24/7 responde tus preguntas mientras trabajas en la lección.
¿Necesito experiencia previa para empezar HTML Academy?
No se requiere experiencia previa. HTML Academy en CoddyKit está estructurado para principiantes hasta estudiantes avanzados, así que puedes empezar aquí o desde el inicio y avanzar a tu ritmo. Esta es la lección 2 de 4.
¿Cuánto tiempo toma la lección «Eventos dragover y drop»?
La mayoría de las lecciones de CoddyKit toman alrededor de 5–10 minutos. Cada una es compacta e interactiva, así que avanzas constantemente y retomas exactamente por donde dejaste en la web y la app.
¿Puedo escribir y ejecutar código en esta lección de HTML Academy?
Sí. Cada lección de HTML Academy incluye un editor de código integrado, así que escribes y ejecutas código real directamente en tu navegador y obtienes retroalimentación instantánea de IA — sin configuración local necesaria.
Todas las lecciones de este curso
- Atributo draggable y evento dragstart
- Eventos dragover y drop
- Objeto dataTransfer
- Lista práctica con reordenación mediante arrastre