Drag and Drop between two list control in Flex4

Home Tutorial Flex Flex4 Components Drag and Drop between two list control in Flex4

Drag and Drop between two list control in Flex4
Posted on: July 12, 2010 at 12:00 AM

In this example you can see how the data items of list are drag and drop from one list to another list.

Drag and Drop between two list control in Flex4:

In this example you can see how the data items of list are drag and drop from one list to another list. Dragging and dropping is simple between two list control because the the component use the same data format.

Example:

<?xml version="1.0" encoding="utf-8"?>

<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"

xmlns:s="library://ns.adobe.com/flex/spark"

xmlns:mx="library://ns.adobe.com/flex/mx"

minWidth="955" minHeight="600"

creationComplete="itemData();">

<fx:Script>

<![CDATA[

import mx.collections.ArrayList;

private function itemData():void {

Item.dataProvider =

new ArrayList(['Cold Drink', 'Peties',

'Pestry','Chips','Cream Roll','Veg Roll']);

buyItem.dataProvider = new ArrayList([]);

}

]]>

</fx:Script>

<s:Panel title="Drag and drop between two list control"

chromeColor="#555555"

color="#CCCCCC" width="311" height="225" backgroundColor="#93AE93">

<s:Label text="List of Item"

x="17" y="10"

color="#000000"

fontFamily="Verdana"/>

<s:Label text="Choose item for buy"

x="155" y="10"

color="#000000"

fontFamily="Verdana"/>

<s:VGroup x="21" y="36" width="233" horizontalAlign="center">

<s:HGroup>

<s:List id="Item"

allowMultipleSelection="true"

dragEnabled="true"

dragMoveEnabled="true"

color="#000000"

height="120"

contentBackgroundColor="#FFFBCF"/>

<s:Label text=">>" color="#000000"/>

<s:List id="buyItem"

dropEnabled="true"

color="#000000"

contentBackgroundColor="#FFFBCF"

height="120"/>

</s:HGroup>

<s:Button id="reset"

label="Reset"

click="itemData()"/>

</s:VGroup>

</s:Panel>

</s:Application>

Output:

Running Application:

To view this page ensure that Adobe Flash Player version 10.0.0 or greater is installed.

Download this code

Related Tags for Drag and Drop between two list control in Flex4:

«Previous Index Next»

Ask Questions?

If you are facing any programming issue, such as compilation errors or not able to find the code you are looking for.

Ask your questions, our development team will try to give answers to your questions.

Tutorial Topics