El contenido ajeno a la aplicación no tiene acceso a los objetos File que se producen al arrastrar archivos a una aplicación de AIR. Tampoco es posible pasar uno de estos objetos File al contenido de la aplicación a través de un puente de entorno limitado. (Se debe acceder a las propiedades del objeto durante la serialización). No obstante, se pueden colocar archivos en la aplicación detectando los eventos nativeDragDrop de AIR en el objeto HTMLLoader.
Normalmente, si un usuario coloca una archivo en un fotograma que aloja contenido ajeno a la aplicación, el evento drop no se propaga desde el elemento secundario al elemento principal. Sin embargo, dado que los eventos distribuidos por HTMLLoader (que contiene todo el contenido HTML de una aplicación de AIR) no forman parte del flujo de eventos de HTML, de todos modos se puede recibir el evento drop en el contenido de la aplicación.
Para recibir el evento para colocar un archivo, el documento principal añade un detector de eventos al objeto HTMLLoader utilizando la referencia provista por
window.htmlLoader
:
window.htmlLoader.addEventListener("nativeDragDrop",function(event){
var filelist = event.clipboard.getData(air.ClipboardFormats.FILE_LIST_FORMAT);
air.trace(filelist[0].url);
});
En el ejemplo siguiente un documento principal carga una página secundaria en un entorno limitado remoto (http://localhost/). El documento principal detecta el evento
nativeDragDrop
en el objeto HTMLLoader y reseña la URL del archivo.
<html>
<head>
<title>Drag-and-drop in a remote sandbox</title>
<script language="javascript" type="text/javascript" src="AIRAliases.js"></script>
<script language="javascript">
window.htmlLoader.addEventListener("nativeDragDrop",function(event){
var filelist = event.clipboard.getData(air.ClipboardFormats.FILE_LIST_FORMAT);
air.trace(filelist[0].url);
});
</script>
</head>
<body>
<iframe src="child.html"
sandboxRoot="http://localhost/"
documentRoot="app:/"
frameBorder="0" width="100%" height="100%">
</iframe>
</body>
</html>
El documento secundario debe presentar un destino válido, llamando al método
preventDefault()
del objeto Event en los controladores de eventos en HTML
dragenter
y
dragover
. De lo contrario, el evento drop nunca se llevará a cabo.
<html>
<head>
<title>Drag and drop target</title>
<script language="javascript" type="text/javascript">
function preventDefault(event){
event.preventDefault();
}
</script>
</head>
<body ondragenter="preventDefault(event)" ondragover="preventDefault(event)">
<div>
<h1>Drop Files Here</h1>
</div>
</body>
</html>
