Copying and Moving data using drag and drop


 

Copying and Moving data using drag and drop

You can drag and drop the data from list to dataGrid using different data formats in this example.

You can drag and drop the data from list to dataGrid using different data formats in this example.

Copying and Moving data using drag and drop:

You can drag and drop the data from list to dataGrid using different data formats in this example. When you move data and add it to the drop target it will be removed from draginitiator and show in drop target. When you copy data and add it to the drop target it will not be removed from draginitiator and it will be shown in the drop target. We use the dragDrop event for the drop target to add the data and dragComplete event for the drag initiator for remove data.

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;

import mx.events.DragEvent;

import mx.managers.DragManager;

import mx.core.DragSource;

import mx.collections.IList;

private function gridinitialize():void {

dataList.dataProvider =new ArrayCollection([

{label:"Bikrant", DOB:"01/01/1986",

City:"Delhi", State:"NewDelhi"},

{label:"Brijesh", DOB:"15/07/1984",

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

{label:"Ravi", DOB:"27/06/1989",

City:"Mumbai", State:"Maharashtra"},

{label:"Avanish", DOB:"11/01/1985",

City:"Kanpur", State:"Uttar Pradesh"},

{label:"Satya", DOB:"25/10/1989",

City:"CHandigarh", State:"Punjab"},

{label:"Samar", DOB:"27/05/1987",

City:"Gurgoan", State:"Hariyana"}

]);

studentData.dataProvider = new ArrayCollection([]);

0

}

private function dragDropHandler(event:DragEvent):void {

if (event.dragSource.hasFormat("itemsByIndex"))

1

{

event.preventDefault();

event.currentTarget.hideDropFeedback(event);

2

var dropTarget:DataGrid =

DataGrid(event.currentTarget);

var itemsVector:Vector.<Object> =

3

event.dragSource.dataForFormat('itemsByIndex') as Vector.<Object>;

var tempItem:Object =

{ label: itemsVector[0].label,

4

DOB: itemsVector[0].DOB,

City: itemsVector[0].City,

State: itemsVector[0].State

5

};

var dropLoc:int = dropTarget.calculateDropIndex(event);

IList(dropTarget.dataProvider).addItemAt(tempItem, dropLoc);

6

if (event.ctrlKey) {

DragManager.showFeedback(DragManager.COPY);

return;

7

}

else {

DragManager.showFeedback(DragManager.MOVE);

8

return;

}

}

9

DragManager.showFeedback(DragManager.NONE);

}

]]>

0

</fx:Script>

<s:Panel title="Copying and Moveing data using drag and drop"

chromeColor="#555555"

1

color="#CCCCCC" width="564"

height="259">

<mx:ApplicationControlBar horizontalAlign="center"

2

width="562">

<s:Label text="Drag and drop data from List to datagrid"

color="#000000"

3

fontFamily="Verdana"/>

</mx:ApplicationControlBar>

<s:List id="dataList"

4

dragEnabled="true"

dragMoveEnabled="true"

color="#000000"

5

height="120"

contentBackgroundColor="#FFFBCF" x="12" y="37"/>

<mx:DataGrid id="studentData"

6

allowMultipleSelection="true"

dragEnabled="true"

dropEnabled="true"

7

color="#000000"

x="135" y="37"

width="417"

8

dragDrop="dragDropHandler(event);">

<mx:columns>

<mx:DataGridColumn dataField="label"/>

9

<mx:DataGridColumn dataField="DOB"/>

<mx:DataGridColumn dataField="City"/>

<mx:DataGridColumn dataField="State"/>

0

</mx:columns>

</mx:DataGrid>

<s:Button id="btnreset"

1

label="Reset"

x="13" y="193"

click="gridinitialize()"/>

2

</s:Panel>

</s:Application>

Output:

3

Running Application:

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

Download this code

4

Ads