Flex中如何利用dragEnabled, dropEnabled和dragMoveEnabled控制不同DataGrid间项目移动，复制操作的例子

By Minidxer | October 5, 2008

接下来的例子演示了Flex中如何利用dragEnabled, dropEnabled和dragMoveEnabled，控制不同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="horizontal"
  4.         verticalAlign="middle"
  5.         backgroundColor="white">
  6.  
  7.     <mx:Array id="arr">
  8.         <mx:Object colA="Item A.0" colB="Item B.0" colC="Item C.0" />
  9.         <mx:Object colA="Item A.1" colB="Item B.1" colC="Item C.1" />
  10.         <mx:Object colA="Item A.2" colB="Item B.2" colC="Item C.2" />
  11.         <mx:Object colA="Item A.3" colB="Item B.3" colC="Item C.3" />
  12.         <mx:Object colA="Item A.4" colB="Item B.4" colC="Item C.4" />
  13.         <mx:Object colA="Item A.5" colB="Item B.5" colC="Item C.5" />
  14.         <mx:Object colA="Item A.6" colB="Item B.6" colC="Item C.6" />
  15.         <mx:Object colA="Item A.7" colB="Item B.7" colC="Item C.7" />
  16.         <mx:Object colA="Item A.8" colB="Item B.8" colC="Item C.8" />
  17.         <mx:Object colA="Item A.9" colB="Item B.9" colC="Item C.9" />
  18.     </mx:Array>
  19.  
  20.     <mx:ApplicationControlBar dock="true">
  21.         <mx:Form>
  22.             <mx:FormItem label="DataGrid #1:"
  23.                     direction="horizontal">
  24.                 <mx:CheckBox id="dg1_dragEnabled"
  25.                         label="dragEnabled" />
  26.                 <mx:CheckBox id="dg1_dropEnabled"
  27.                         label="dropEnabled" />
  28.                 <mx:CheckBox id="dg1_dragMoveEnabled"
  29.                         label="dragMoveEnabled" />
  30.             </mx:FormItem>
  31.             <mx:FormItem label="DataGrid #2:"
  32.                     direction="horizontal">
  33.                 <mx:CheckBox id="dg2_dragEnabled"
  34.                         label="dragEnabled" />
  35.                 <mx:CheckBox id="dg2_dropEnabled"
  36.                         label="dropEnabled" />
  37.                 <mx:CheckBox id="dg2_dragMoveEnabled"
  38.                         label="dragMoveEnabled" />
  39.             </mx:FormItem>
  40.         </mx:Form>
  41.     </mx:ApplicationControlBar>
  42.  
  43.     <mx:VBox width="50%">
  44.         <mx:Label text="DataGrid #1" />
  45.         <mx:DataGrid id="dataGrid1"
  46.                 width="100%"
  47.                 rowHeight="22"
  48.                 dataProvider="{arr}"
  49.                 dragEnabled="{dg1_dragEnabled.selected}"
  50.                 dragMoveEnabled="{dg1_dragMoveEnabled.selected}"
  51.                 dropEnabled="{dg1_dropEnabled.selected}"
  52.                 verticalScrollPolicy="on">
  53.             <mx:columns>
  54.                 <mx:DataGridColumn dataField="colA"
  55.                         headerText="Column A" />
  56.                 <mx:DataGridColumn dataField="colB"
  57.                         headerText="Column B" />
  58.                 <mx:DataGridColumn dataField="colC"
  59.                         headerText="Column C" />
  60.             </mx:columns>
  61.         </mx:DataGrid>
  62.         <mx:Label text="{dataGrid1.dataProvider.length} items" />
  63.     </mx:VBox>
  64.  
  65.     <mx:VBox width="50%">
  66.         <mx:Label text="DataGrid #2" />
  67.         <mx:DataGrid id="dataGrid2"
  68.                 width="100%"
  69.                 rowHeight="22"
  70.                 dataProvider="[]"
  71.                 dragEnabled="{dg2_dragEnabled.selected}"
  72.                 dragMoveEnabled="{dg2_dragMoveEnabled.selected}"
  73.                 dropEnabled="{dg2_dropEnabled.selected}"
  74.                 verticalScrollPolicy="on">
  75.             <mx:columns>
  76.                 <mx:DataGridColumn dataField="colA"
  77.                         headerText="Column A" />
  78.                 <mx:DataGridColumn dataField="colB"
  79.                         headerText="Column B" />
  80.                 <mx:DataGridColumn dataField="colC"
  81.                         headerText="Column C" />
  82.             </mx:columns>
  83.         </mx:DataGrid>
  84.         <mx:Label text="{dataGrid2.dataProvider.length} items" />
  85.     </mx:VBox>
  86.  
  87. </mx:Application>
代码：Peter deHaan 翻译/整理/编译：中文Flex例子

Topics: DataGrid | No Comments » | 268 views Tags: , , ,

Related Post

Leave a Comment

Name(*):

E-Mail(*) :

Website :

Comments :

Search Posts

赞助商链接

Categories

Archives

Blogroll