Book10-No.13 施用拖放 _Web前端

Book10-No.13 使用拖放

1、拖放管理器

拖曳初始器：从中拖曳出来组件的组件或者项目，如一个DataGrid
拖曳源：被拖曳的数据，如DataGrid的一行数据
格式：拖曳源的属性，指定能否将一个对象释放到另一个对象上，拖曳源中的数据与格式相关联
拖曳代理：拖曳过程中显示的图片
释放目标：接受释放拖曳代理的组件

2、在拖曳过程中隐式的产生一个DragSource对象，保存着被拖曳对象的数据

3、根据拖曳支出Flex分为两种：

增强型拖放功能组件：<s:List>、<mx:DataGrid>、<mx:PrintDataGrid>、<mx:Tree>、<mx:Menu>、<mx:List>、<mx:HorizontalList>、<mx:TileList>
非增强型拖放功能组件

4、对于增强型拖放功能组件，直接使用，设置拖曳初始器属性dragEnabled为tue，表示允许拖曳。设置释放目标属性dropEnabled表示允许存放拖曳代理

5、示例：

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
			   xmlns:s="library://ns.adobe.com/flex/spark" 
			   xmlns:mx="library://ns.adobe.com/flex/mx" 
			   minWidth="955" minHeight="600"
			   creationComplete="prodData.send()">
	<fx:Script>
		<![CDATA[
			import mx.collections.ArrayCollection;
			import mx.rpc.events.ResultEvent;	
		
			[Bindable]
			private var products:ArrayCollection;
			
			[Bindable]
			private var products2:ArrayCollection = new ArrayCollection();
						
			private function resultHandler(event:ResultEvent):void{
				products=event.result.catalog.product;
			}
		]]>
	</fx:Script>
	
	<s:layout>
		<s:VerticalLayout gap="50"
			paddingLeft="20" paddingTop="20"/>
	</s:layout>
	
	<fx:Declarations>
		<!-- Place non-visual elements (e.g., services, value objects) here -->
		<s:HTTPService id="prodData"
			url="http://www.flexgrocer.com/product.xml"
			result="resultHandler(event)"/>			
	</fx:Declarations>	
	
	<mx:DataGrid id="initiatorGrid" 
		dataProvider="{products}" dragEnabled="true">
		<mx:columns>
			<mx:DataGridColumn dataField="name" headerText="Product"/>
			<mx:DataGridColumn dataField="cost" headerText="Price"/>
			<mx:DataGridColumn dataField="isLowFat" headerText="Low Fat"/>
			<mx:DataGridColumn dataField="isOrganic" headerText="Organic"/>
		</mx:columns>
	</mx:DataGrid>
	
	
	<mx:DataGrid id="targetGrid" dropEnabled="true" dataProvider="{products2}">
		<mx:columns>
			<mx:DataGridColumn dataField="name" headerText="Product"/>
			<mx:DataGridColumn dataField="cost" headerText="Price"/>
			<mx:DataGridColumn dataField="isLowFat" headerText="Low Fat"/>
			<mx:DataGridColumn dataField="isOrganic" headerText="Organic"/>
			<mx:DataGridColumn dataField="category" headerText="Category"/>
		</mx:columns>
	</mx:DataGrid>
	
</s:Application>

?6、