Home Tutorial Flex Flex4 Components Drag and Drop in Flex4

 
 

Share on Google+Share on Google+
Drag and Drop in Flex4
Posted on: July 12, 2010 at 12:00 AM
Advertisement
Drag and Drop is the operation in which you can drag and drop an item or component in to another component.

Drag and Drop in Flex4:

Drag and Drop is the operation in which you can drag and drop an item or component in to another component. The drag and drop operation in-build in certain controls such as List, Tree and DataGrid. There are three stages of drag and drop operation which are following:

1. Initiation
2. Dragging
3. Dropping

You will use three property for performing drag and drop operation:

1. dragEnabled
2. dropEnabled
3. dragMoveEnabled

In this example you can see how we can use the drag and drop operation with item of component.

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="gridinitialize()"&>

<fx:Script>

<![CDATA[

import mx.collections.ArrayCollection;

private function gridinitialize():void {

studentData.dataProvider =new ArrayCollection([

{aName:'Bikrant', DOB:'01/01/1986',

City:'Delhi', State:'NewDelhi'},

{aName:'Brijesh', DOB:'15/07/1984',

City:'Noida', State:'Uttar Pradesh'},

{aName:'Gaurav', DOB:'27/06/1989',

City:'Mumbai', State:'Maharashtra'}

]);

data.dataProvider=new ArrayCollection([]);

}

]]>

</fx:Script>

<s:Panel title="Drag and Drop Example/font>&"

chromeColor="#555555/font>"

color="#CCCCCC" width="425" height="508"&>

<mx:ApplicationControlBar width="423"

horizontalAlign="center">

<s:Label text="Student Information"

color="#000000"

fontFamily="Verdana"/>

</mx:ApplicationControlBar>

<mx:DataGrid id="studentData"

allowMultipleSelection="true"

dragEnabled="true"

dropEnabled="true/font>&"

dragMoveEnabled="true/font>"

color="#000000"

x="10" y="38"&>

<mx:columns>

<mx:DataGridColumn dataField="aName"/>

<mx:DataGridColumn dataField="DOB"/>

<mx:DataGridColumn dataField="City"/>

<mx:DataGridColumn dataField="State"/>

</mx:columns>

</mx:DataGrid>

<mx:ApplicationControlBar width="423/font>"

x="0" y="228&"

horizontalAlign="center/font>"&>

<s:Label text="Selected Student Information"

color="#000000"

fontFamily="Verdana"/>

</mx:ApplicationControlBar>

<mx:DataGrid id="data"

allowMultipleSelection="true/font>"

dropEnabled="true"

color="#000000"

x="11" y="265">

<mx:columns>

<mx:DataGridColumn dataField="aName"/>

<mx:DataGridColumn dataField="DOB"/>

<mx:DataGridColumn dataField="City"/>

<mx:DataGridColumn dataField="State"/>

</mx:columns>

</mx:DataGrid>

<s:Button id="reset"

label="Reset"

x="177" y="446"

click="gridinitialize();"/>

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

Advertisement

Related Tags for Drag and Drop in Flex4:


Follow us on Twitter, or add us on Facebook or Google Plus to keep you updated with the recent trends of Java and other open source platforms.

Posted on: July 12, 2010

Recommend the tutorial

Advertisements Advertisements
 

 

 

DMCA.com