DragManager的学习、使用。
示例:
代码:
示例:
blog.flexexamples.com/wp-content/uploads/DragManager_acceptDragDrop_test/bin/main.html
代码:
<?
xml version="1.0" encoding="utf-8"
?>
<!-- http://blog.flexexamples.com/2008/04/16/removing-items-from-a-flex-datagrid-control-using-the-dragmanager-class/ -->
< mx:Application xmlns:mx ="http://www.adobe.com/2006/mxml"
layout ="vertical"
verticalAlign ="middle"
backgroundColor ="white" >
< mx:Script >
<![CDATA[
import mx.core.IUIComponent;
import mx.events.DragEvent;
import mx.managers.DragManager;
private function image_dragEnter(evt:DragEvent):void {
var obj:IUIComponent = IUIComponent(evt.currentTarget);
DragManager.acceptDragDrop(obj);
}
private function image_dragDrop(evt:DragEvent):void {
var item:Object = dataGrid.selectedItem;
var idx:int = arrColl.getItemIndex(item);
arrColl.removeItemAt(idx);
}
]]>
</ mx:Script >
< mx:ArrayCollection id ="arrColl" >
< mx:source >
< mx:Array >
< mx:Object c1 ="r1.c1" c2 ="r1.c2" c3 ="r1.c3" c4 ="r1.c4" />
< mx:Object c1 ="r2.c1" c2 ="r2.c2" c3 ="r2.c3" c4 ="r2.c4" />
< mx:Object c1 ="r3.c1" c2 ="r3.c2" c3 ="r3.c3" c4 ="r3.c4" />
< mx:Object c1 ="r4.c1" c2 ="r4.c2" c3 ="r4.c3" c4 ="r4.c4" />
< mx:Object c1 ="r5.c1" c2 ="r5.c2" c3 ="r5.c3" c4 ="r5.c4" />
< mx:Object c1 ="r6.c1" c2 ="r6.c2" c3 ="r6.c3" c4 ="r6.c4" />
< mx:Object c1 ="r7.c1" c2 ="r7.c2" c3 ="r7.c3" c4 ="r7.c4" />
< mx:Object c1 ="r8.c1" c2 ="r8.c2" c3 ="r8.c3" c4 ="r8.c4" />
< mx:Object c1 ="r9.c1" c2 ="r9.c2" c3 ="r9.c3" c4 ="r9.c4" />
</ mx:Array >
</ mx:source >
</ mx:ArrayCollection >
< mx:Panel title ="Drag DataGrid item over the trash icon to remove item"
styleName ="opaquePanel" >
< mx:DataGrid id ="dataGrid"
dataProvider =" {arrColl} "
dragEnabled ="true"
width ="400"
rowCount ="6"
verticalScrollPolicy ="on" >
< mx:columns >
< mx:DataGridColumn dataField ="c1"
headerText ="Column 1" />
< mx:DataGridColumn dataField ="c2"
headerText ="Column 2" />
< mx:DataGridColumn dataField ="c3"
headerText ="Column 3" />
< mx:DataGridColumn dataField ="c4"
headerText ="Column 4" />
</ mx:columns >
</ mx:DataGrid >
< mx:ControlBar horizontalAlign ="right" >
< mx:Image id ="image"
source ="@Embed('assets/iconUninstall.png')"
dragDrop ="image_dragDrop(event);"
dragEnter ="image_dragEnter(event);" />
</ mx:ControlBar >
</ mx:Panel >
</ mx:Application >
<!-- http://blog.flexexamples.com/2008/04/16/removing-items-from-a-flex-datagrid-control-using-the-dragmanager-class/ -->
< mx:Application xmlns:mx ="http://www.adobe.com/2006/mxml"
layout ="vertical"
verticalAlign ="middle"
backgroundColor ="white" >
< mx:Script >
<![CDATA[
import mx.core.IUIComponent;
import mx.events.DragEvent;
import mx.managers.DragManager;
private function image_dragEnter(evt:DragEvent):void {
var obj:IUIComponent = IUIComponent(evt.currentTarget);
DragManager.acceptDragDrop(obj);
}
private function image_dragDrop(evt:DragEvent):void {
var item:Object = dataGrid.selectedItem;
var idx:int = arrColl.getItemIndex(item);
arrColl.removeItemAt(idx);
}
]]>
</ mx:Script >
< mx:ArrayCollection id ="arrColl" >
< mx:source >
< mx:Array >
< mx:Object c1 ="r1.c1" c2 ="r1.c2" c3 ="r1.c3" c4 ="r1.c4" />
< mx:Object c1 ="r2.c1" c2 ="r2.c2" c3 ="r2.c3" c4 ="r2.c4" />
< mx:Object c1 ="r3.c1" c2 ="r3.c2" c3 ="r3.c3" c4 ="r3.c4" />
< mx:Object c1 ="r4.c1" c2 ="r4.c2" c3 ="r4.c3" c4 ="r4.c4" />
< mx:Object c1 ="r5.c1" c2 ="r5.c2" c3 ="r5.c3" c4 ="r5.c4" />
< mx:Object c1 ="r6.c1" c2 ="r6.c2" c3 ="r6.c3" c4 ="r6.c4" />
< mx:Object c1 ="r7.c1" c2 ="r7.c2" c3 ="r7.c3" c4 ="r7.c4" />
< mx:Object c1 ="r8.c1" c2 ="r8.c2" c3 ="r8.c3" c4 ="r8.c4" />
< mx:Object c1 ="r9.c1" c2 ="r9.c2" c3 ="r9.c3" c4 ="r9.c4" />
</ mx:Array >
</ mx:source >
</ mx:ArrayCollection >
< mx:Panel title ="Drag DataGrid item over the trash icon to remove item"
styleName ="opaquePanel" >
< mx:DataGrid id ="dataGrid"
dataProvider =" {arrColl} "
dragEnabled ="true"
width ="400"
rowCount ="6"
verticalScrollPolicy ="on" >
< mx:columns >
< mx:DataGridColumn dataField ="c1"
headerText ="Column 1" />
< mx:DataGridColumn dataField ="c2"
headerText ="Column 2" />
< mx:DataGridColumn dataField ="c3"
headerText ="Column 3" />
< mx:DataGridColumn dataField ="c4"
headerText ="Column 4" />
</ mx:columns >
</ mx:DataGrid >
< mx:ControlBar horizontalAlign ="right" >
< mx:Image id ="image"
source ="@Embed('assets/iconUninstall.png')"
dragDrop ="image_dragDrop(event);"
dragEnter ="image_dragEnter(event);" />
</ mx:ControlBar >
</ mx:Panel >
</ mx:Application >