flex 拖拽

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" initialize="init()">
	<mx:Script>
		<![CDATA[
			import mx.controls.Alert;
			import mx.events.DragEvent;
			import mx.collections.ArrayCollection;
			
			private var grid1DP:ArrayCollection = new ArrayCollection([
				{roleName:"校长"},{roleName:"班主任"},{roleName:"任课老师"}
			]);
			
			[Bindable]
			private var grid2DP:ArrayCollection=new ArrayCollection();
			
			private function init():void{
			}
			
			private function doSubmit():void
			{
				var array1:ArrayCollection=this.grid1DP;
				var array2:ArrayCollection=this.grid2DP;
				
				Alert.show("1:"+array1.length+"---"+"2:"+array2.length);
				for(var i:int=0 ; i<array1.length ;i++){
					Alert.show(array1.getItemAt(i).roleName+"")
				}
			}
			
			//拖拽移动
			private function grid1DragCompleteHandler(event:DragEvent):void
			{
				grid2DP.addItem(dataGrid1.selectedItem);
				this.grid1DP.removeItemAt(this.grid1DP.getItemIndex(dataGrid1.selectedItem)); 
			}
			
			private function grid2DragBeforeHandler(event:DragEvent):void
			{
				grid1DP.addItem(dataGrid2.selectedItem);
				this.grid2DP.removeItemAt(this.grid2DP.getItemIndex(dataGrid2.selectedItem));    	
			}
			
			//双击移动
			private function dg1ToDG2():void{
				grid2DP.addItem(dataGrid1.selectedItem);
				this.grid1DP.removeItemAt(this.grid1DP.getItemIndex(dataGrid1.selectedItem));
			}
			private function dg2ToDG1():void{
				grid1DP.addItem(dataGrid2.selectedItem);
				this.grid2DP.removeItemAt(this.grid2DP.getItemIndex(dataGrid2.selectedItem));
			}
		]]>
	</mx:Script>
	<mx:Canvas width="100%" height="100%" top="33" bottom="4" >
		<mx:Grid id="myForm" width="98%" height="100%"  horizontalAlign="center" paddingTop="8" paddingBottom="10" >
			<mx:GridRow height="100%">
				<mx:GridItem colSpan="2" height="100%" >
					<mx:HBox width="100%" height="100%"  paddingTop="8"  >
						<mx:Panel width="100%" height="100%" title="未选择角色">
							<mx:DataGrid id="dataGrid1" dataProvider="{grid1DP}" width="100%" height="100%" doubleClickEnabled="true" doubleClick="dg1ToDG2()" dragEnabled="true" dragMoveEnabled="true" dropEnabled="false"  dragComplete="grid1DragCompleteHandler(event)">
								<mx:columns>
									<mx:DataGridColumn dataField="roleName" headerText="角色名称" />
								</mx:columns>
							</mx:DataGrid>
						</mx:Panel>	
						<mx:Panel width="100%" height="100%" title="已选择角色">
							<mx:DataGrid id="dataGrid2" dataProvider="{grid2DP}" width="100%" height="100%" doubleClickEnabled="true" doubleClick="dg2ToDG1()" dragEnabled="true" dragMoveEnabled="true" dropEnabled="false" dragComplete="grid2DragBeforeHandler(event)"  >
								<mx:columns>
									<mx:DataGridColumn dataField="roleName" headerText="角色名称" />
								</mx:columns>
							</mx:DataGrid>
						</mx:Panel>
					</mx:HBox>
				</mx:GridItem>	
			</mx:GridRow>
			<mx:GridRow>
				<mx:GridItem  colSpan="2" horizontalAlign="center">
					<mx:Button label="确 定" click="doSubmit()"/>
					<mx:Button label="取 消" />
				</mx:GridItem>
			</mx:GridRow>
		</mx:Grid>
		<mx:Spacer height="5" />
	</mx:Canvas>
</mx:Application>

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" initialize="init()">
	<mx:Script>
		<![CDATA[
			import mx.events.DragEvent;
			import mx.collections.ArrayCollection;
			
			private var grid1DP:ArrayCollection = new ArrayCollection([
					{roleName:"校长"},{roleName:"任课老师"}
				]);
				
			[Bindable]
			private var grid2DP:ArrayCollection=new ArrayCollection();
				
			private function init():void{
			}
			
			private function grid1DragCompleteHandler(event:DragEvent):void
			{
			   grid2DP=new ArrayCollection();
			   grid2DP.addItem(dataGrid1.selectedItem);
			}
			
			private function dg1ToDG2():void{
				if(grid2DP.length>0)
			    {
			    	grid1DP.addItem(grid2DP.getItemAt(0));
			    		
			    }
				grid2DP=new ArrayCollection();
			    grid2DP.addItem(dataGrid1.selectedItem);
			    this.grid1DP.removeItemAt(this.grid1DP.getItemIndex(dataGrid1.selectedItem));
		  }
		  
		 private function grid2DragBeforeHandler(event:DragEvent):void
		 {
			 if(grid2DP.length>0)
			 {
			    grid1DP.addItem(grid2DP.getItemAt(0));
			    		
			 }
			    	
		}
		
		private function dg2ToDG1():void{
			if(grid2DP.length>0)
			{
			  grid1DP.addItem(grid2DP.getItemAt(0));
			    		
			}
			  this.grid2DP.removeItemAt(0);
		}
		]]>
	</mx:Script>
	<mx:Canvas width="100%" height="100%" top="33" bottom="4" >
		<mx:Grid id="myForm" width="98%" height="100%"  horizontalAlign="center" paddingTop="8" paddingBottom="10" >
		    <mx:GridRow height="100%">
		      <mx:GridItem colSpan="2" height="100%" >
		    	<mx:HBox width="100%" height="100%"  paddingTop="8"  >
		    	  <mx:Panel width="100%" height="100%" title="未选择角色">
		    	  	<mx:DataGrid id="dataGrid1" dataProvider="{grid1DP}" width="100%" height="100%" doubleClickEnabled="true" doubleClick="dg1ToDG2()" dragEnabled="true" dragMoveEnabled="true" dropEnabled="true"  dragComplete="grid1DragCompleteHandler(event)">
		    			<mx:columns>
		    				<mx:DataGridColumn dataField="roleName" headerText="角色名称" />
		    			</mx:columns>
		    		</mx:DataGrid>
		    	  </mx:Panel>	
		    	  <mx:Panel width="100%" height="100%" title="已选择角色">
		    	  	<mx:DataGrid id="dataGrid2" dataProvider="{grid2DP}" width="100%" height="100%" doubleClickEnabled="true" doubleClick="dg2ToDG1()" dragEnabled="true" dragMoveEnabled="true" dropEnabled="true" dragDrop="grid2DragBeforeHandler(event)"  >
		    			<mx:columns>
		    				<mx:DataGridColumn dataField="roleName" headerText="角色名称" />
		    			</mx:columns>
		    		</mx:DataGrid>
		    	  </mx:Panel>
		    	</mx:HBox>
		      </mx:GridItem>	
		    </mx:GridRow>
		    <mx:GridRow>
		    	<mx:GridItem  colSpan="2" horizontalAlign="center">
		    		<mx:Button label="确 定"/>
		    		<mx:Button label="取 消" />
		    	</mx:GridItem>
		    </mx:GridRow>
		</mx:Grid>
		<mx:Spacer height="5" />
	</mx:Canvas>
</mx:Application>