Objeto dataTransfer

El objeto dataTransfer está asociado a cada evento de arrastre y es el único canal de comunicación entre el elemento de origen y la zona de destino. Transporta datos de carga útil, listas de archivos, efectos permitidos y el efecto de soltar elegido.

El elemento de origen escribe cargas útiles tipadas con e.dataTransfer.setData(format, value). La zona de destino las lee con e.dataTransfer.getData(format). Ambos argumentos son cadenas; los valores se convierten a cadenas antes de almacenarse.

Almacenar la misma carga útil con varios tipos hace que el arrastre sea interoperable: "text/plain" funciona en cualquier editor de texto, los navegadores reconocen "text/uri-list" como una URL y "text/html" conserva el formato en los procesadores de texto. La zona de destino elige el tipo que entiende.

Por motivos de privacidad, el navegador expone únicamente la lista de tipos —no los valores— a los controladores de dragenter y dragover mediante e.dataTransfer.types. Los datos reales solo se pueden leer dentro del evento drop de una zona de destino que acepte la operación.

Cuando el usuario arrastra desde el escritorio, e.dataTransfer.files es un FileList de objetos File. Está vacío en los arrastres que se originan dentro de la página. Considérelo la forma canónica de detectar una operación externa de soltar archivos y de acceder a su tamaño, nombre y tipo.

e.dataTransfer.items expone tanto cadenas como archivos mediante objetos DataTransferItem. Cada elemento tiene kind ("string" o "file"), type (MIME) y getAsString(cb) / getAsFile(). items es la alternativa moderna y consciente del tipo frente a files + getData.

effectAllowed lo establece el elemento de origen en dragstart y enumera las operaciones que admite. dropEffect lo establece la zona de destino en dragover y elige una de esas operaciones. El navegador cancela la operación si ambos valores no coinciden.

e.dataTransfer.setDragImage(node, x, y) sustituye la imagen fantasma predeterminada. Pase un elemento DOM fuera de la pantalla, con los estilos que prefiera, junto con el desplazamiento del cursor respecto a ese elemento. El cambio se aplica únicamente al arrastre actual.

e.dataTransfer.clearData() elimina todos los formatos; clearData("text/plain") elimina un único formato. Rara vez es necesario porque dataTransfer se crea de nuevo en cada arrastre, pero resulta útil cuando empieza a rellenar datos y después decide cancelar la operación.

Los archivos arrastrados desde una página del origen A a una página del origen B se siguen entregando: la API funciona entre distintos orígenes. Sin embargo, la página receptora solo ve lo que el origen colocó explícitamente en dataTransfer; no se concede acceso arbitrario al DOM.

Al escribir el tipo "DownloadURL" (setData("DownloadURL", "image/png:filename.png:https://...")), una página puede permitir que el usuario arrastre un archivo fuera del navegador hasta el escritorio. La compatibilidad es limitada (navegadores basados en Chromium), así que debe detectarla y ofrecer una alternativa adecuada.

¿Por qué no se permite que dataTransfer.getData() devuelva el valor almacenado real durante el evento dragover?

dataTransfer es el puente entre el origen del arrastre y el destino de la suelta. Use setData/getData para cargas útiles de cadenas tipadas, items para una vista unificada de archivos y cadenas, files para sueltas desde el escritorio, setDragImage para vistas previas personalizadas, y effectAllowed/dropEffect para negociar la operación.