Swami Charan's Blog My personal blog…

Implementing Drag-and-Drop in Flex/AIR – I

Drag and Drop operation is one of the mostly used actions in almost all the apps. Drap and Drop action involves actions like selecting any object and moving across the application or dragging an object in or out of one application to the other.

In Flex Apps, drag and drop involves almost all the components like dragging items from the Lists, Datagrid etc or dragging any other control onto some other control.

Flex, by default, has support for drag and drop for some list based components like List, DataGarid etc. Of course, we can create our own drag and drop behavior for remaining components like panel, containter etc.

Stages in Drag and Drop

Drag and Drop basically has three main stages: initiation, dragging and dropping.

Initiation 

User initiates a drag-and-drop operation by using the mouse to select a Flex component, or an item in a Flex component, and then moving the component or item while holding down the mouse button. For example, a user selects an item in a List control with the mouse and, while holding down the mouse button, moves the mouse several pixels. The selected component, the List control in this example, is the drag initiator.

Dragging 

While still holding down the mouse button, the user moves the mouse around the Flex application. Flex displays an image during the drag, called the drag proxy. A drag source object (an object of type DragSource) contains the data being dragged.

Dropping 

When the user moves the drag proxy over another Flex component, that component becomes a possible drop target. The drop target inspects the drag source object to determine whether the data is in a format that the target accepts and, if so, allows the user to drop the data onto it. If the drop target determines that the data is not in an acceptable format, the drop target disallows the drop.

We can either copy or drag and drop contents from one components to other using Drag and Drop.

In this post we will look into implementing Drag n Drop action on List Based controls like List etc.

You can make these controls drag initiators by setting the dragEnabled property to true. Similarly, you can make these controls drop targets by setting the dropEnabled property to true.

Once these properties are set, we can any item from drag-enabled control to drop-enabled control. We can also copy items by dragging using Ctrl key.

Here is the simple example, wherein the first Lis made drag-enabled by enabling dragEnabled to true and the second List is made drop-enabled by setting dropEnabled to true.

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"

layout="horizontal" width="400" height="300"

creationComplete="creationCompleteHandler()">

<mx:Script>

<![CDATA[

private function creationCompleteHandler():void{

list1.dataProvider = ['ListItem1','ListItem2','ListItem3'];

list2.dataProvider = [];

}

]]>

</mx:Script>

<mx:Panel title="Panel" height="200" layout="horizontal">

<mx:HBox width="100%">

<mx:List id="list1" width="50%" height="150" dragEnabled="true"/>

<mx:List id="list2" width="50%" height="150" dropEnabled="true"/>

</mx:HBox>

</mx:Panel>

</mx:Application>

Result:

In the above example, we are able to drag  from List1 to List2 itself.

Two way Drag-Drop

We can make it to drag from either controls to drop into either of controls. For that to happen, we need to make dragEnabled and dropEnabled of both the components to true.

 

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"

layout="horizontal" width="400" height="300"

creationComplete="creationCompleteHandler()">

<mx:Script>

<![CDATA[

private function creationCompleteHandler():void{

list1.dataProvider = ['ListItem1','ListItem2','ListItem3'];

list2.dataProvider = [];

}

]]>

</mx:Script>

<mx:Panel title="Panel" height="200" layout="horizontal">

<mx:HBox width="100%">

<mx:List id="list1" width="50%" height="150"

dragEnabled="true" dropEnabled="true"/>

<mx:List id="list2" width="50%" height="150"

dragEnabled="true" dropEnabled="true"/>

</mx:HBox>

</mx:Panel>

</mx:Application>

 

Result:

In this example, as you can see, we have made both components both drag-enabled and drop-enabled. So, we can drag from any of these components to any of the component.

Using dragMoveEnabled property

As you have noticed, when we drag a single item from one component to another multiple times, its creating a copy of that item. To avoid copying, we can make dragMoveEnabled property to true. When this property is set to true, it will allow the items to be moved. You can still copy the items, by pressing Control Key while doing drag-drop action.

Setting dragMoveEnabled property to true for both the Lists will result in:

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
 layout="horizontal" width="400" height="300"
 creationComplete="creationCompleteHandler()">
 <mx:Script>
  <![CDATA[
   private function creationCompleteHandler():void{
    list1.dataProvider = ['ListItem1','ListItem2','ListItem3'];
    list2.dataProvider = [];
   }
  ]]>
 </mx:Script>
 <mx:Panel title="Panel" height="200" layout="horizontal">
  <mx:HBox width="100%">
   <mx:List id="list1" width="50%" height="150"
    dragEnabled="true" dropEnabled="true"
    dragMoveEnabled="true"/>
   <mx:List id="list2" width="50%" height="150"
    dragEnabled="true" dropEnabled="true"
    dragMoveEnabled="true"/>
  </mx:HBox>
 </mx:Panel>
</mx:Application>

 

Result:

In this you can see that you can move the items of a single list without being copied. Press Control key to copy the items.

Till now we were seeing how to implement Drag and Drop operation on List based controls.

In my next post, we will see how to do this on  non-List based controls.