Jan
19
2010

Drag and Drop of Images In Adobe Air

Posted by Cesare
Categories: adobeair, programming Comments

In this tutorial we will see how to show images dragged from the file system into an Adobe Air application. As we have seen in other tutorials to intercept when something is dragged and dropped on an Adobe Air application we need to specify two handlers: nativeDragEnter and nativeDragDrop. To accept the drag&drop the content of the clipboard has to be a list of files (line 12). When there is a drop we store the content in an array (line 18). For each element of the array we check the extension (png in our case) and we create an image object, which we add to a tile list (lines 20-26).

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32

<mx:WindowedApplication xmlns:mx="http://www.adobe.com/2006/mxml" 
    layout="vertical" 
    nativeDragEnter="dragEnterHandler(event)" 
    nativeDragDrop="dropHandler(event)">
 
    <mx:Script>
	<![CDATA[
 
        import mx.controls.Image;
 
	private function dragEnterHandler(e:NativeDragEvent):void {
	    if (e.clipboard.hasFormat(ClipboardFormats.FILE_LIST_FORMAT)) {
		NativeDragManager.acceptDragDrop(this);
	    }
	}
 
	private function dropHandler(e:NativeDragEvent):void {
	    var files:Array = e.clipboard.getData(ClipboardFormats.FILE_LIST_FORMAT) as Array;
 
	    for each (var f:Object in files) {
	  	if (f.extension == "png") {
		    var image:Image = new Image();
		    image.source = "file:///" + f.nativePath
		    droppedImages.addChild(image);
		}
	    }
	}
	]]>
    </mx:Script>
 
    <mx:Tile id="droppedImages" />
</mx:WindowedApplication>

The result should look something like this video.

Source code is available.

Similar Posts

  • Share/Bookmark

Comments

    Leave a Reply