`
msyspacer
  • 浏览: 9915 次
  • 性别: 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 拖放功能的基本步骤如下: 1. **设置源对象**:首先,你需要定义可被拖动的源对象。这通常是在某个组件(如 Button 或 Canvas)上添加事件监听器,例如 `mouseDown` 事件,当用户点击并按住鼠标时启动...

    Flex4实现拖拽功能

    在本主题中,我们将深入探讨如何在Flex4中实现图片的拖放功能,包括两种模式:拖动图片不删除原图和拖动图片后删除原图。 首先,我们需要了解Flex4中的DragManager类,它是实现拖放操作的核心。DragManager提供了...

    Flex3组件拖放教程

    拖放功能是Flex3中一种非常实用的功能,它可以实现用户界面元素的直观交互。通过拖放操作,用户能够选择一个对象(例如`List`控件或Flex中的`Image`控件),并将其拖动至另一个组件(容器)中,最终将该对象添加到...

    Flex3+组件拖放教程

    在Flex3中,组件的拖放功能是一项核心特性,它允许用户轻松地通过鼠标操作将一个对象从一处拖动到另一处,从而实现数据的移动或者功能的交互。 拖放功能在Flex3中的实现主要依赖于两个主要类:`DragManager` 和 `...

    flex中 Tree树节点内部拖动实例(此实例限制了什么节点可以拖动及拖动到什么位置)

    这个实例涉及的是在Flex中的Tree组件实现节点的内部拖放功能,这对于创建交互式用户界面,尤其是数据层级结构的展示非常有用。在本文中,我们将详细探讨如何在Flex的Tree组件中实现节点的拖放操作,并且限制可拖动的...

    flex 拖拽效果程序

    标题"flex 拖拽效果程序"表明我们将关注的是如何在Flex中创建一个具有拖放功能的程序。在Flex中,这种功能主要通过DragManager和UIComponent类的拖放API来实现。让我们详细了解一下实现拖放效果的过程。 1. **启用...

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

    在本教程中,我们将深入探讨如何使用Flex4一步步地实现网页技术,这对于初学者来说是一次宝贵的学习机会。 首先,Flex4是Adobe Flash平台的一部分,它基于ActionScript 3.0,提供了丰富的组件库和强大的数据绑定...

    flex 拖拽功能 中文文档

    以下是一个使用Flex的拖放功能将一个`List`控件中的条目移动到另一个`List`控件的简单示例代码: ```xml &lt;!-- dragdrop\SimpleListToListMove.mxml --&gt; creationComplete="initApp();"&gt; &lt;![CDATA[ import mx...

    《Flex 4实战》.pdf

    书籍内容覆盖了从基础到进阶的广泛知识,首先介绍Flex的基础概念,包括表单和数据处理,然后逐步深入到核心概念,例如导航、拖放功能和事件处理。书中还详细介绍了如何使用新增的Spark组件、数据服务、图表设计和...

    Flex拖拽库flex拖拽库

    1. 拖放事件模型:在Flex中,实现拖放功能涉及一系列的事件,包括`dragStart`、`drop`、`dragEnter`、`dragLeave`、`dragOver`和`dragDrop`等。这些事件使得开发者可以精确地控制拖放过程中的各个阶段,例如决定何时...

    flex builder 4 help

    4. **Graphical Layout(图形布局)**:Flex Builder 4 提供了改进的设计视图,允许开发者通过拖放组件和调整约束来直观地创建界面布局。这一功能大大简化了界面设计过程。 5. **States(状态)**:在Flex 4中,...

    flex DragTile.zip DragTile.zipDragTile.zip

    本次我们将关注一个名为"DragTile"的项目,它利用Flex强大的拖放功能来实现元素的动态布局。通过分析项目压缩包中的文件,我们可以深入理解Flex在拖放操作中的实现方式。 首先,`.actionScriptProperties`文件是...

    flex 拖拽的例子

    `.flexProperties`, `.project`, `.settings`, `libs`, `html-template`, `src` 可能包含了实现拖放功能的源代码、项目配置和资源文件,通过查看这些文件,可以更深入地学习和实践Flex拖放功能的实现。

    Flex4中文帮助文档

    - **集成开发环境**:提供代码编辑、调试、构建和部署等功能,支持Flex和ActionScript项目。 - **Design View**:可视化的界面设计工具,允许开发者通过拖放组件来构建用户界面。 - **Source View**:代码编辑...

    Flex拖拽控件效果

    在IT行业中,Flex是一种...总之,了解和掌握Flex的拖放功能对于开发交互性强的Flex应用至关重要。它涉及到对`DragManager`的使用,设置拖放事件监听,以及优化拖放的视觉反馈,这些都是提高用户界面交互性的重要技术。

    flex 弹出窗口选择,支持autocomplete功能

    5. **DragManager和DropTarget**:为了实现拖放功能,我们需要利用Flex的DragManager和DropTarget类来处理拖放事件。 6. **自定义配置文件解析**:我们可以创建一个配置类,读取XML或JSON格式的配置文件,解析其中的...

    flex3一个简单购物车拖拽的例子

    在Flex3中,你可以创建具有丰富用户界面和交互功能的应用程序,而“flex3一个简单购物车拖拽的例子”是一个演示如何在Flex环境中实现拖放功能的实例。这个例子展示了如何将商品图标或项拖入数据网格(DataGrid)中,...

    Flex关于拖拽编程

    Flex的拖放功能允许开发者进行高度自定义,例如,通过重写默认的行为,实现更复杂的交互逻辑,或者创建自定义的拖放效果。 综上所述,Flex的拖拽编程提供了一套完整的机制,从启动拖放、控制拖动代理到处理数据...

    Flex 4.5 实现tree拖拽到任意组建

    通过以上步骤,你可以在Flex 4.5环境中实现Tree组件到DataGrid组件的拖放功能,使用户能直观地进行数据操作。提供的`treeDrag.mxml`文件应该是实现这一功能的示例代码,你可以参考并学习其中的实现方式。在实际项目...

    Flex_DragDrop

    标题"Flex_DragDrop"表明我们将讨论如何在Flex环境中实现拖放功能,特别是针对图片组件的实例。描述中提到提供了Flex中图片组件的拖放实现实例源码,并暗示后续会有更多关于表格数据等其他组件的拖放示例。 Flex是...

Global site tag (gtag.js) - Google Analytics