Flex中利用DragManager类将DataGrid中的项目移除的例子

By Minidxer | April 17, 2008

接下来的例子演示了如何利用DragManager类，将一个数据提供源DataGrid中的项目，拖到一个图片控件中从而删除项目。

让我们先来看一下Demo（可以右键View Source或点击这里察看源代码）：

下面是完整代码(或点击这里察看)：

Download: main.mxml
  1. <?xml version="1.0" encoding="utf-8"?>
  2. <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
  3.         layout="vertical"
  4.         verticalAlign="middle"
  5.         backgroundColor="white">
  6.  
  7.     <mx:Script>
  8.         <![CDATA[
  9.             import mx.core.IUIComponent;
  10.             import mx.events.DragEvent;
  11.             import mx.managers.DragManager;
  12.  
  13.             private function image_dragEnter(evt:DragEvent):void {
  14.                 var obj:IUIComponent = IUIComponent(evt.currentTarget);
  15.                 DragManager.acceptDragDrop(obj);
  16.             }
  17.  
  18.             private function image_dragDrop(evt:DragEvent):void {
  19.                 var item:Object = dataGrid.selectedItem;
  20.                 var idx:int = arrColl.getItemIndex(item);
  21.                 arrColl.removeItemAt(idx);
  22.             }
  23.         ]]>
  24.     </mx:Script>
  25.  
  26.     <mx:ArrayCollection id="arrColl">
  27.         <mx:source>
  28.             <mx:Array>
  29.                 <mx:Object c1="r1.c1" c2="r1.c2" c3="r1.c3" c4="r1.c4"/>
  30.                 <mx:Object c1="r2.c1" c2="r2.c2" c3="r2.c3" c4="r2.c4"/>
  31.                 <mx:Object c1="r3.c1" c2="r3.c2" c3="r3.c3" c4="r3.c4"/>
  32.                 <mx:Object c1="r4.c1" c2="r4.c2" c3="r4.c3" c4="r4.c4"/>
  33.                 <mx:Object c1="r5.c1" c2="r5.c2" c3="r5.c3" c4="r5.c4"/>
  34.                 <mx:Object c1="r6.c1" c2="r6.c2" c3="r6.c3" c4="r6.c4"/>
  35.                 <mx:Object c1="r7.c1" c2="r7.c2" c3="r7.c3" c4="r7.c4"/>
  36.                 <mx:Object c1="r8.c1" c2="r8.c2" c3="r8.c3" c4="r8.c4"/>
  37.                 <mx:Object c1="r9.c1" c2="r9.c2" c3="r9.c3" c4="r9.c4"/>
  38.             </mx:Array>
  39.         </mx:source>
  40.     </mx:ArrayCollection>
  41.  
  42.     <mx:Panel title="Drag DataGrid item over the trash icon to remove item"
  43.             styleName="opaquePanel">
  44.         <mx:DataGrid id="dataGrid"
  45.                 dataProvider="{arrColl}"
  46.                 dragEnabled="true"
  47.                 width="400"
  48.                 rowCount="6"
  49.                 verticalScrollPolicy="on">
  50.             <mx:columns>
  51.                 <mx:DataGridColumn dataField="c1"
  52.                         headerText="Column 1" />
  53.                 <mx:DataGridColumn dataField="c2"
  54.                         headerText="Column 2" />
  55.                 <mx:DataGridColumn dataField="c3"
  56.                         headerText="Column 3" />
  57.                 <mx:DataGridColumn dataField="c4"
  58.                         headerText="Column 4" />
  59.             </mx:columns>
  60.         </mx:DataGrid>
  61.  
  62.         <mx:ControlBar horizontalAlign="right">
  63.             <mx:Image id="image"
  64.                     source="@Embed('assets/iconUninstall.png')"
  65.                     dragDrop="image_dragDrop(event);"
  66.                     dragEnter="image_dragEnter(event);" />
  67.         </mx:ControlBar>
  68.     </mx:Panel>
  69.  
  70. </mx:Application>
代码：Peter deHaan 翻译/整理/编译：minidxer

Topics: Flex | Tags: , , , , , , ,

Related Post

Leave a Comment

Name(*):

E-Mail(*) :

Website :

Comments :

Search Posts

Categories

Archives

Recent Posts

Blogroll

Sponsored Ads