Destinos de soltado y dataTransfer
Acepte elementos soltados y transfiera datos.
Destinos de soltado y dataTransfer es una lección gratuita de JavaScript 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 JavaScript Academy, y tu progreso se sincroniza en la web y la app de CoddyKit. El curso de JavaScript Academy incluye 4 lecciones en total.
¿Qué convierte un elemento en destino de soltar?
De forma predeterminada, los elementos rechazan las operaciones de soltar. Para aceptar una operación, debe impedir el comportamiento predeterminado tanto en dragover como en drop. Este es, con diferencia, el error más común.
Permitir el drop con dragover
El navegador bloquea el drop a menos que llame a preventDefault() en el controlador de dragover. Sin ello, el evento drop nunca se dispara.
const zone = document.getElementById("dropzone");
zone.addEventListener("dragover", (e) => {
e.preventDefault(); // REQUIRED to allow drop
});El evento drop
Cuando el usuario suelta el elemento sobre un destino válido, se dispara drop. Impida también la acción predeterminada aquí (esto evita que el navegador abra los archivos o las URL soltados) y lea los datos.
zone.addEventListener("drop", (e) => {
e.preventDefault();
const id = e.dataTransfer.getData("text/plain");
console.log("Dropped", id);
});Leer dataTransfer
getData(format) recupera lo que se almacenó en dragstart. La cadena de formato debe coincidir con la que se estableció.
const payload = e.dataTransfer.getData("text/plain");Mover un elemento
Un uso clásico consiste en añadir el nodo arrastrado a la zona de drop usando el id que transfirió.
zone.addEventListener("drop", (e) => {
e.preventDefault();
const id = e.dataTransfer.getData("text/plain");
const dragged = document.getElementById(id);
zone.appendChild(dragged);
});Varios formatos de datos
dataTransfer puede contener varios formatos a la vez —por ejemplo, text/plain y application/json— y el destino lee el que entiende.
e.dataTransfer.setData("text/plain", "42");
e.dataTransfer.setData("application/json", JSON.stringify({ id: 42 }));Establecer dropEffect
En dragover, establezca dropEffect en "copy", "move" o "link" para controlar el cursor y la semántica de la operación.
zone.addEventListener("dragover", (e) => {
e.preventDefault();
e.dataTransfer.dropEffect = "move";
});effectAllowed frente a dropEffect
effectAllowed (establecido por el origen) declara qué está permitido; dropEffect (establecido por el destino) elige una de esas opciones. Ambos funcionan juntos para mostrar el cursor adecuado.
Reordenar una lista
Combine la posición del drop con la inserción para reordenar los elementos. Determine si debe insertar el elemento antes o después del elemento que está bajo el cursor.
list.addEventListener("drop", (e) => {
e.preventDefault();
const id = e.dataTransfer.getData("text/plain");
const dragged = document.getElementById(id);
list.insertBefore(dragged, e.target);
});Identificar el destino del drop
Utilice e.target (el elemento que está bajo el puntero) y closest() para encontrar el contenedor relevante cuando los destinos están anidados.
zone.addEventListener("drop", (e) => {
const slot = e.target.closest(".slot");
if (slot) slot.appendChild(getDragged(e));
});Borrar datos
dataTransfer.clearData() vacía los datos almacenados; si se proporciona un formato, solo se borra ese formato. De todos modos, el almacenamiento se restablece automáticamente después del arrastre.
e.dataTransfer.clearData("text/plain");Comprobación rápida
Pruebe los destinos de drop.
Repaso: destinos de drop y dataTransfer
Creó zonas de drop llamando a preventDefault() en dragover y drop, leyó la carga útil con getData, movió y reordenó elementos, estableció dropEffect y gestionó destinos anidados. A continuación: comentarios visuales.
Preguntas frecuentes
¿La lección «Destinos de soltado y dataTransfer» es gratis?
Sí — el texto completo de «Destinos de soltado y dataTransfer» 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 JavaScript Academy, actualiza a CoddyKit PRO. El curso de JavaScript Academy incluye 4 lecciones en total.
¿Qué aprenderé en «Destinos de soltado y dataTransfer»?
Acepte elementos soltados y transfiera datos. Practicas JavaScript 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 JavaScript Academy?
No se requiere experiencia previa. JavaScript 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 «Destinos de soltado y dataTransfer»?
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 JavaScript Academy?
Sí. Cada lección de JavaScript 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
- Cómo hacer que los elementos se puedan arrastrar
- Destinos de soltado y dataTransfer
- Respuesta visual durante el arrastre
- Arrastre de archivos a la página