`
msyspacer
  • 浏览: 9670 次
  • 性别: Icon_minigender_1
  • 来自: 南京
社区版块
存档分类
最新评论

Flex4 拖放功能实现

 
阅读更多

 XML提供数据源

<?xml version="1.0" encoding="utf-8"?>
				<menuitems>
					<children label="Open" icon="openedIcon"/>
					<children label="New" icon="plusIcon"/>
					<children label="Save" icon="saveIcon"/>
					<children label="Colse" icon="closeIcon"/>
					<children label="Undo" icon="undoIcon"/>
					<children label="Cut" icon="cutIcon"/>
					<children label="Copy" icon="copyIcon"/>
					<children label="Paste" icon="pasteIcon"/>
				</menuitems>
<?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" 
			   creationComplete="init()">
	<fx:Script>
		<![CDATA[
			import mx.collections.ArrayCollection;
		]]>
	</fx:Script>
	<fx:Declarations>
		<fx:XML id="dataList" source="dataList.xml" />
		<s:XMLListCollection id="menu" source="{dataList.children}"/>  
	</fx:Declarations>
	<fx:Script>
		<![CDATA[
			import mx.events.DragEvent;
			import mx.core.UIComponent;
			import mx.managers.DragManager;
			import mx.controls.Alert;
			
			protected var savedItems:ArrayCollection;
			
			protected function init():void
			{
				list_new.addEventListener(DragEvent.DRAG_ENTER,onDragEnter);
				list_new.addEventListener(DragEvent.DRAG_DROP,onDragDrop);
			}
			
			protected function onDragEnter(event:DragEvent):void
			{
				// TODO 
				var items:Vector.<Object> = event.dragSource.dataForFormat("itemsByIndex") as Vector.<Object>;
				// isActive 是自己设定的标志位
				if(items[0].isActive)
				{
					// 接受拖动
					DragManager.acceptDragDrop(event.target as UIComponent);
				}
				else
				{
					// 阻止使用默认的功能
					DragManager.showFeedback(DragManager.NONE);
					event.preventDefault();
					Alert.show("Failed!");
				}			
			}
			
			protected function onDragDrop(event:DragEvent):void
			{
				// 同样可以在放置的时候添加过滤条件
			}
		]]>
	</fx:Script>
	<s:Panel title="Drag" id="drag" verticalCenter="0" horizontalCenter="0" width="450" height="300">
		<s:layout>
			<s:HorizontalLayout paddingLeft="20" paddingTop="20"/>
		</s:layout>
		<s:HGroup>
			<!--dragEnable控制是否可被拖拽-->
			<!--dragMoveEnable默认是false,即拖拽对于数组影响是复制,设置为true的时候 使其动作为移动-->
			<!--同一个空间内在再添加上dropEnable就是可以在本空间内拖拽重新排序-->
			<!--allowMultipleSelection允许多行操作的D&D属性-->
			<s:List id="list_old" dragEnabled="true" dropEnabled="true" dragMoveEnabled="true" dataProvider="{menu}" labelField="@label" allowMultipleSelection="true"/>
			<!--dropEnable控制是否可以放置-->
			<s:List id="list_new" dragEnabled="true" dropEnabled="true" dragMoveEnabled="true"  dataProvider="{new ArrayCollection()}" labelField="@label" allowMultipleSelection="true"/>
		</s:HGroup>
	</s:Panel> 
</s:Application>

 

分享到:
评论

相关推荐

    Flex 3 拖放实现

    Flex 3 实现的拖放示例,很简单,可以移植到自己的程序中,Web形式和AIR形式都可以使用。

    Flex3组件拖放教程

    处理list-based控件的拖放事件 13 运行在AIR中的Flex应用程序的拖放 16 拖放实例 17 例子1:用Canvas作为drop target 17 例子2:指定drag proxy 18 例子3:为drop target处理dragOver和dragExit事件 ...

    Flex4实现拖拽功能

    flex实现了图片的拖拽功能,包括,拖动图片不删除原来图片,和拖动图片删除原来图片

    Flex3+组件拖放教程

    Flex3组件拖放教程,该组件是flex组件中最有特色的

    FLEX 4中实现对DATAGRID的过滤功能

    在FLEX4中开发带有过滤功能的DATAGRID组件

    flex翻书功能实现源码

    flex翻书功能 效果不错 值得学习flex翻书功能 效果不错 值得学习flex翻书功能 效果不错 值得学习flex翻书功能 效果不错 值得学习flex翻书功能 效果不错 值得学习flex翻书功能 效果不错 值得学习flex翻书功能 效果...

    基于FLEX4多功能柱状统计图

    基于FLEX4多功能柱状统计图,包括了分组统计图、单项统计图。知识点有:设置坐标轴样式、图例样式、柱子颜色设置、柱子mouseover、click事件等。还包括比较怪异的图例文字大小设置。 这是一个可直接运行的DEMO。...

    《Flex 4实战》.pdf

    Flex4中引入了新的ui组件,提供了更好的性能监控,并且大大提高了编译速度。《Flex 4实战》是一本全面的指南,为web设计人员和开发人员提供了Flex的详细介绍。《Flex 4实战》从基础讲起,介绍了有关表单和数据的知识...

    flex实现计算器功能

    flex基础列子,利用flex技术实现计算器功能

    flex4与Java通信实例

    flex4出来一段时间了,去年看了一段时间flex3... 功能描述:分别用代码实现了三种flex4与Java通信 三种方式: 1 flex 与普通java类通信RemoteObject 2 flex 与服务器交互HTTPService 3 flex与webservice交互WebService

    flex 4 学习资料

    flex4 的DataGrid里面加一列CheckBox并实现数据交互的试验 - 暖阳下的猫的日志 - 网易博客 Flex 4 ColumnChart 图表使用实例ColumnChart_RIA前线-Flex富应用、Flex中文教程、Flex实例源码 Flex实现ColumnChart柱图为...

    Flex4实战完整版(1)

    Flex4中引入了新的ui组件,提供了更好的性能监控,并且大大提高了编译速度。 《Flex4实战》是一本全面的指南,为web设计人员和开发人员提供了Flex的详细介绍。本书从基础讲起,介绍了有关表单和数据的知识,然后...

    Flex图片预览功能的实现

    不错的图片预览功能,可以实现滚动预览,效果很炫

    Flex4权威指南+随书源代码+Flexbuild使用工具

    1. Flex4权威指南电子书与此书的源代码 2. Flexbuild使用工具适用于4.6之前版本 电子书内容概括: 1. 理解RIA 2. 开始 3. 布局界面 4. 使用简单的控件 5. 处理事件 6. 使用远程XML数据 7. 创建类 8. 使用数据绑定和...

    Flex 4 中 实现 图文混排

    完美解决 Flex 4 中 实现 图文混排

    FLEX4的皮肤skin

    FLEX4的皮肤skin.教你如何使用皮肤

    Flex4实战代码

    Flex4实战代码

    FLEX4_Flex4教程 - FLEX4从入门到精通,挺不错的值得一看

    FLEX4_Flex4教程 - FLEX4从入门到精通,挺不错的值得一看

    用Flex4一步一步实现网页技术

    一个用Flex4一步一步实现的网站作业,适合新手查看学习。

    flex4实现的简单相册实例

    初学flex4,自己实现的相册,下载下来即可运行看到效果的!

Global site tag (gtag.js) - Google Analytics