In this tutorial we will learn the basics of native drag and drop in Adobe Air. Specifically we will see two examples:

  • drag an image from a native application (Fireworks) and drop it onto an air application
  • drag an image from an air application and drop it onto another air application

We will start by implementing the target application, which accepts the drop action. To enable this there are two behaviors to specify: what to do when something is dragged over the app and what to do when there is a drop action. These correspond to two events: nativeDragEnter and nativeDragDrop, both belonging to the WindowedApplication class. So we will start with this code.

1
2
3
4
5
6
7
<mx:WindowedApplication 
        xmlns:mx="http://www.adobe.com/2006/mxml" 
        layout="absolute" 
	nativeDragEnter="dragEnterHandler(event)" 
	nativeDragDrop="dropHandler(event)">
 
</mx:WindowedApplication>

Once associated the handlers we need to define them.

25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
<mx:Script>
	<![CDATA[
 
	private function dragEnterHandler(e:NativeDragEvent):void {
		if (e.clipboard.hasFormat(ClipboardFormats.BITMAP_FORMAT)) {
			NativeDragManager.acceptDragDrop(this);
		}
	}
 
	private function dropHandler(e:NativeDragEvent):void {
		var data:BitmapData = e.clipboard.getData(ClipboardFormats.BITMAP_FORMAT) as BitmapData;
		var myBit:Bitmap = new Bitmap(data);
		stage.addChild(myBit);
	}
 
      ]]>
</mx:Script>

In the nativeDragEnter event we have to check whether the dragged item is of type bitmap, if yes we can accept the drag (lines 29-30). During the drag a copy of the item is stored in the system’s clipboard. To replicate it in the target application we have to read it (line 35), clone it (line 36) and then add it to the display tree (line 37). This is all we need to do in the target application. At this point we can already test the application. Let’s run it, open an image in Fireworks and drag&drop it. See the video below.

Now let’s move to the other case: we start dragging an image from another air application. Here we have to mimic the behavior of Fireworks above: copy in the system clipboard the image when there is a startDrag action. Let’s start by adding an image to the application.

1
2
3
4
5
6
7
8
<mx:WindowedApplication 
	xmlns:mx="http://www.adobe.com/2006/mxml" 
	layout="absolute">
 
	<mx:Image id="image" 
		source="logo.png" 
		mouseDown="startDragDrop(event)"/> 
</mx:WindowedApplication>

As you can see we attached a function to the mouseDown event. Now let’s define this function.

20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<mx:Script>
	<![CDATA[
 
	private function startDragDrop(e:MouseEvent):void {
 
		var data:BitmapData = new BitmapData(image.width, image.height);
		data.draw(image);
 
		// create my clipboard object to be passed to dragmanager
		var cb:Clipboard = new Clipboard();
		cb.setData(ClipboardFormats.BITMAP_FORMAT, data);
 
		// data here is a 'representative' of the dragged object during dragging.
		NativeDragManager.doDrag(this, cb, data); 
 
	}
	]]>
</mx:Script>

We create a copy of the image (lines 25-26). We use this in two cases: to put it in a clipboard object (line 30) and to provide feedback during the dragging (line 33). Now we can run both applications and check if everything is correct.

Simple uh? Please drop a comment if you have any followup question.
Source code is available.

Similar Posts

Share

Comments

  1. Hi the drag and drop code works fine with images..
    How to do this in the case of mp3 or wav files instead
    of images. and also i want to drag an mp3 file from AIR
    and drop to desktop.

    January 22, 2011
  2. The procedure is very similar. The file format is mp3.
    Here is a snippet.

    var object:Object = clip.getData(ClipboardFormats.FILE_LIST_FORMAT);
    var req:URLRequest = new URLRequest(object[0].url);
    var sound:Sound = new Sound();
    sound.addEventListener(Event.COMPLETE, soundLoaded);
    sound.load(req);
    
    January 24, 2011
  3. Great Article, How would I extend this functionality to
    replace images in an Image component embedded within a panel? for example I have a default image in an Image component, I would like the user to be able to replace that image with a dragged in bitmap. The panel which contains the image is a custom component of which a number are created at runtime.

    June 17, 2011
    - Ivory
  4. You can associate handlers to your custom panel.

    June 17, 2011
  5. Thanks for getting back to me so quickly, still not behaving though, below is an example of my component.

    June 17, 2011
    - Ivory
  6. Code did not post.. here it is.
    http://pastebin.com/pgrdZUiy

    June 17, 2011
    - Ivory
  7. Add a dropEnabled=”true” to your panel.

    June 18, 2011
  8. Leave a Reply