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.
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. |
