表格之间的行拖动

下面的例子使用DataGrid组件的 dragEnabled, dropEnabled,和 dragMoveEnabled属性实现表格之间的行数据移动

全代码：

<? xml version="1.0" encoding="utf-8" ?>
<!--  http://blog.flexexamples.com/2007/09/19/dragging-rows-between-two-different-flex-datagrid-controls/  -->
< mx:Application  xmlns:mx ="http://www.adobe.com/2006/mxml"
        layout ="horizontal"
        verticalAlign ="middle"
        backgroundColor ="white" >

     < mx:Array  id ="arr" >
         < mx:Object  colA ="Item A.0"  colB ="Item B.0"  colC ="Item C.0"   />
         < mx:Object  colA ="Item A.1"  colB ="Item B.1"  colC ="Item C.1"   />
         < mx:Object  colA ="Item A.2"  colB ="Item B.2"  colC ="Item C.2"   />
         < mx:Object  colA ="Item A.3"  colB ="Item B.3"  colC ="Item C.3"   />
         < mx:Object  colA ="Item A.4"  colB ="Item B.4"  colC ="Item C.4"   />
         < mx:Object  colA ="Item A.5"  colB ="Item B.5"  colC ="Item C.5"   />
         < mx:Object  colA ="Item A.6"  colB ="Item B.6"  colC ="Item C.6"   />
         < mx:Object  colA ="Item A.7"  colB ="Item B.7"  colC ="Item C.7"   />
         < mx:Object  colA ="Item A.8"  colB ="Item B.8"  colC ="Item C.8"   />
         < mx:Object  colA ="Item A.9"  colB ="Item B.9"  colC ="Item C.9"   />
     </ mx:Array >

     < mx:ApplicationControlBar  dock ="true" >
         < mx:Form >
             < mx:FormItem  label ="DataGrid #1:"
                    direction ="horizontal" >
                 < mx:CheckBox  id ="dg1_dragEnabled"
                        label ="dragEnabled"   />
                 < mx:CheckBox  id ="dg1_dropEnabled"
                        label ="dropEnabled"   />
                 < mx:CheckBox  id ="dg1_dragMoveEnabled"
                        label ="dragMoveEnabled"   />
             </ mx:FormItem >
             < mx:FormItem  label ="DataGrid #2:"
                    direction ="horizontal" >
                 < mx:CheckBox  id ="dg2_dragEnabled"
                        label ="dragEnabled"   />
                 < mx:CheckBox  id ="dg2_dropEnabled"
                        label ="dropEnabled"   />
                 < mx:CheckBox  id ="dg2_dragMoveEnabled"
                        label ="dragMoveEnabled"   />
             </ mx:FormItem >
         </ mx:Form >
     </ mx:ApplicationControlBar >

     < mx:VBox  width ="50%" >
         < mx:Label  text ="DataGrid #1"   />
         < mx:DataGrid  id ="dataGrid1"
                width ="100%"
                rowHeight ="22"
                dataProvider ="{arr}"
                dragEnabled ="{dg1_dragEnabled.selected}"
                dragMoveEnabled ="{dg1_dragMoveEnabled.selected}"
                dropEnabled ="{dg1_dropEnabled.selected}"
                verticalScrollPolicy ="on" >
             < mx:columns >
                 < mx:DataGridColumn  dataField ="colA"
                        headerText ="Column A"   />
                 < mx:DataGridColumn  dataField ="colB"
                        headerText ="Column B"   />
                 < mx:DataGridColumn  dataField ="colC"
                        headerText ="Column C"   />
             </ mx:columns >
         </ mx:DataGrid >
         < mx:Label  text ="{dataGrid1.dataProvider.length} items"   />
     </ mx:VBox >

     < mx:VBox  width ="50%" >
         < mx:Label  text ="DataGrid #2"   />
         < mx:DataGrid  id ="dataGrid2"
                width ="100%"
                rowHeight ="22"
                dataProvider ="[]"
                dragEnabled ="{dg2_dragEnabled.selected}"
                dragMoveEnabled ="{dg2_dragMoveEnabled.selected}"
                dropEnabled ="{dg2_dropEnabled.selected}"
                verticalScrollPolicy ="on" >
             < mx:columns >
                 < mx:DataGridColumn  dataField ="colA"
                        headerText ="Column A"   />
                 < mx:DataGridColumn  dataField ="colB"
                        headerText ="Column B"   />
                 < mx:DataGridColumn  dataField ="colC"
                        headerText ="Column C"   />
             </ mx:columns >
         </ mx:DataGrid >
         < mx:Label  text ="{dataGrid2.dataProvider.length} items"   />
     </ mx:VBox >

</ mx:Application >

 

width="100%" height="350" src="http://blog.flexexamples.com/wp-content/uploads/DataGrid_dragEnabled_test/bin/main.html">