Flash Kid Logo  
Home - Tutorials - Applications - Games - Books - Directory - Site Map - Contact Us  
 
 


 

 

Drag and Drop UI Components in Flash Builder
Author: Salman Awan
Difficulty Level: Beginner
Flash Version: Flash Builder (Flex) 4 and later
Sources to Download: drag_and_drop_ui_components.zip
Prerequisites: Flash Builder Basics, ActionScript Basics

Introduction:

Flash has brought richest form of interactivity to the web. Easily moving components around on stage with mere use of mouse is one form of that interactivity. Flash Builder (Flex) supports this drag drop functionality of UI components using startDrag and stopDrag functions.

In this tutorial we will learn how to enable our flex application to support dragging and dropping of UI components with simple use of mouse which is a basic feature in advanced flex based rich internet applications.
 
 

Configuring a New Project:

Let’s start with creating a new project like always. Once created open Main.mxml file inside src folder and switch to its Design view.

Drag and drop an Image component on stage which we’ll be making to respond to mouse movements.

Just to make this image component look good, let’s add an image resource in our project. Create a folder named images under src folder. For this tutorial I have placed silhouette of a man acquired from Adobe developer network for demo purposes.

Switch to source view and replace default <mx:Image> tag inserted by Flash Builder with this line of code

<mx:Image id="img1" x="67" y="45" width="89" height="90" source="images/ajones.jpg"/>

So far we have done nothing special except that creating an image and setting its properties

Adding Drag Functionality:

Let’s now do something special, we want our image control to start dragging when mouse is clicked on it and moved. So adding mouseDown event of image control is the perfect place to do so.

Insert this piece of code within our Image control above.

mouseDown="img1.startDrag();"

so that the code will look like:

<mx:Image id="img1" x="67" y="45" width="89" height="90" source="images/ajones.jpg" mouseDown="img1.startDrag();"/>

We have told Flex Builder to start dragging img1 control when mouseDown event is invoked on this control. Ctrl + F11 your application at this point and you can see you are able to drag the image control when mouse button is clicked and moved.

However you are unable to detach it from your mouse pointer and it keeps following your mouse pointer. It is missing drop functionality actually.

Adding Drop Functionality:

Adding drop functionality to this control is identical to drag functionality, only difference is that event which will invoke this functionality is mouseUp event. When mouse button is released control’s mouseUp event is triggered, which in return will stop the dragging using stopDrag function.

Insert this piece of code next to mouseDown event in above control:

mouseUp="img1.stopDrag();"

so that the code will look like:

<mx:Image id="img1" x="67" y="45" width="89" height="90" source="images/ajones.jpg" mouseDown="img1.startDrag();"mouseUp="img1.stopDrag();"/>

Wala, you are good to test your application. You can now drag and drop this UI control like we used to do in flash applications.

Extending using Functions:

Most of the time when you’ll be using drag-drop functionality, you would be doing more than just dragging and dropping controls e.g. you might need to restrict the area within which you allow your users to drag this control.

For that purpose we can write two custom functions that will hold dragging functionality and can be extended to incorporate any custom codes.
Code below can be added into same Main.mxml file.

<fx:Script>
<![CDATA[

public function mouseDownHandler():void{
img2.startDrag();
}

public function mouseUpHandler():void{
img2.stopDrag();
}
]]>
</fx:Script>

<!-- dragging and dropping with custom event function calls for more processing -->

<mx:Image id="img2" x="100" y="200" width="89" height="90" source="images/teastman.jpg" mouseDown="mouseDownHandler()"  mouseUp="mouseUpHandler()"/>

In above code, we have inserted a second image control with id img2, and defined two custom functions to be invoked when this image control is clicked or released. You can write custom ActionScript code within these functions to extend your drag-drop functionality.

 
 

Exercises:

  1. What other events are available to Image Control besides mouseUp and mouseDown?

  2. What happens to our dragged control if we move mouse pointer off the browser window?

  3. Extend this code base to restrict the movement of UI control within a defined rectangle.
 

Resources: http://www.adobe.com/devnet/flex/testdrive/articles/1_build_a_flex_app4.html

 
 
 
 
 
 
Related Links
Discussion Forums for Tutorials
 
 
 
Feedbacks :
 
 
 
Send Feedback
Your Name:
Email:
Comments:
 
Code:
 


 
 
 
© 2011 flashkid.org! All Rights Reserved.
 
   
 
a project of: salmanawan, other projects: xonsolutions.com