Flex 拖拽删除DataGrid中的某一项。

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 >

你可能感兴趣的:(html,xml,Blog,Flex,Adobe)