Uygulama dışı içerik, dosyalar bir AIR uygulamasına sürüklendiğinde ortaya çıkan File nesnelerine erişemez. Bu File nesnelerinden birini sanal alan köprüsü kullanarak uygulama içeriğine göndermek de mümkün değildir. (Nesne özelliklerine serileştirme sırasında erişilmelidir.) Ancak yine de HTMLLoader nesnesinde AIR nativeDragDrop olaylarını dinleyerek uygulamanızdaki dosyaları bırakabilirsiniz.
Normalde bir kullanıcı uygulama dışı içerik barındıran bir çerçeveye dosya bırakırsa, drop olayı alt öğeden üst öğeye yayılmaz. Ancak HTMLLoader (bir AIR uygulamasındaki tüm HTML içeriğinin kabı) tarafından gönderilen olaylar HTML olay akışının bir parçası olmadığı için, hala uygulama içeriğindeki drop olayını alabilirsiniz.
Bir dosya bırakma için olayı almak üzere, üst belge,
window.htmlLoader
tarafından sağlanan başvuruyu kullanarak HTMLLoader nesnesine bir olay dinleyicisi ekler:
window.htmlLoader.addEventListener("nativeDragDrop",function(event){
var filelist = event.clipboard.getData(air.ClipboardFormats.FILE_LIST_FORMAT);
air.trace(filelist[0].url);
});
Aşağıdaki örnek, uzak sanal alana alt sayfa yükleyen bir üst belge kullanır (http://localhost/). Üst öğe HTMLLoader nesnesindeki
nativeDragDrop
olayını dinler ve dosya url'sini izler.
<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>
Alt belge, HTML
dragenter
ve
dragover
olay işleyicilerindeki Event nesnesi
preventDefault()
yöntemini engelleyerek geçerli bir bırakma hedefi sunmalıdır. Yoksa, drop olayı gerçekleşemez.
<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>