`
Callan
  • 浏览: 736055 次
  • 性别: Icon_minigender_1
  • 来自: 上海
社区版块
存档分类
最新评论

Flex拖拽-两个List之间拖拽

    博客分类:
  • Flex
阅读更多
<?xml version="1.0" encoding="utf-8"?>
<mx:WindowedApplication xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" creationComplete="creationHandler();">
	<mx:Script>
		<![CDATA[
		import mx.events.DragEvent;
		import mx.collections.ArrayCollection;
		[Bindable]
		public var isEnabled:Boolean = true;
		private static const DIS_LABEL:String = "不能拖拽";
		private static const EN_LABEL:String = "可以拖拽"; 
		private function creationHandler():void {
			list1.dataProvider = new ArrayCollection(['Spider Monkey', 'Orangutan', 'Gorilla']);
			list2.dataProvider = new ArrayCollection(['Lion', 'Cheetah', 'Puma'])
		}
		private function clickHandler():void {
			enableBtn.label = ( enableBtn.label == DIS_LABEL ) ? EN_LABEL : DIS_LABEL;
			isEnabled = !isEnabled;
		}
		private function dragEnterHandler( evt:DragEvent ):void {
			evt.target.dropEnabled = ( evt.target != evt.dragInitiator );
		}
		]]>
		</mx:Script>
		<mx:VBox width="100%" height="100%">
			<mx:Button id="enableBtn" label="{EN_LABEL}" click="clickHandler();"/>
			<mx:HBox width="100%" height="100%">
				<mx:List id="list1" width="200" height="200" dragEnabled="{isEnabled}" dragMoveEnabled="true" dragEnter="dragEnterHandler(event);"/>
				<mx:List id="list2" width="200" height="200" dragEnabled="{isEnabled}" dragMoveEnabled="true" dragEnter="dragEnterHandler(event);"/>
			</mx:HBox>
		</mx:VBox>
</mx:WindowedApplication>

 

分享到:
评论

相关推荐

    Flex拖拽库flex拖拽库

    1. 拖动源组件:拖动操作的起点,通常是一个可交互的UI组件,如`List`、`Button`等。要启用拖放功能,需要在组件上监听`mouseDown`事件,并调用`DragManager.doDrag()`方法启动拖动。 2. 拖动图像:在拖动过程中...

    flex 拖拽功能 中文文档

    此代码展示了如何初始化两个`List`控件,其中一个作为拖动发起者,另一个作为拖放目标,从而实现数据的动态交互与管理。通过设置`dragEnabled`和`dragMoveEnabled`属性,我们确保了列表项的拖动功能得以启用,而`...

    flex 拖拽的例子

    在Flex中,我们可以为任何UIComponent创建一个DragSource,定义拖动时的数据。例如,如果要拖动一个列表项,我们可以这样设置: ```actionscript var dragSource:DragSource = new DragSource(); dragSource....

    Flex拖拽

    这种功能在视觉应用中尤其有用,比如在两个列表之间拖动数据项、重新定位容器中的控件或是将Flex组件从一个容器移动到另一个容器。 #### 二、Flex拖拽的工作原理 ##### 1. **初始化阶段**: - 用户通过鼠标选择...

    Flex List DataGrid Menu 拖动技术

    在这个例子中,我们有两个`Tree`组件,它们都启用了拖拽功能(`dragEnabled="true"`和`dropEnabled="true"`),并且其中一个还允许拖拽时移动元素(`dragMoveEnabled="true"`)和多选(`allowMultipleSelection="true"`)....

    flex 实例程序 两个列表框之间传递

    在Flex开发中,"两个列表框之间传递"是一种常见的用户界面交互设计,它涉及到数据的双向绑定和事件处理。Flex是Adobe开发的一款用于构建富互联网应用程序(RIA)的框架,它基于ActionScript和MXML,提供了丰富的图形...

    Flex基础培训-6-拖放与过滤

    Flex会显示一个被称为“拖动代理”的图形,用于表示正在拖拽的数据项。被拖拽的数据项称为“拖拽源”。 - **放下**:当用户释放鼠标按键或将拖拽的项放置在一个有效的目标上时,触发放下操作。此时,应用程序会检查...

    Vue使用vue-draggable 插件在不同列表之间拖拽功能

    接下来,在Vue模板中,我们可以创建两个`draggable`元素,分别代表不同的列表。通过`v-model`绑定数据,`v-bind`传递配置,以及监听`@end`事件来处理拖放结束后的行为: ```html &lt;draggable class="selected-list" ...

    拖拽像册flex源码

    5. **组件自定义**:可能需要自定义一个继承自Flex内置组件(如Canvas或List)的类,以便添加拖放功能。自定义组件可以覆盖`startDrag()`和`stopDrag()`方法,以及其他与拖放相关的处理函数。 6. **布局管理器**:...

    Flex基础培训-3-组件和布局

    4. **基于列表的组件**:Flex提供了多种基于列表的组件,如List、Tree、Menu、TileList、HorizontalList等。这些组件用于以不同的视觉形式展示一组集合的数据。例如,List以垂直列的形式展示数据,而HorizontalList...

    实现基于vuejs的拖拽元素的插件

    下面我们将深入探讨如何利用Vue.js实现一个拖拽元素的插件。 首先,我们需要引入一个名为`vuedraggable`的第三方库。`vuedraggable`是基于Sortable.js的Vue组件,它允许我们在Vue实例中轻松实现拖放功能。你可以...

    flex 拓扑图dome

    3. **事件处理**:利用Flex的事件模型,可以监听用户的交互,如点击、拖动等,以便更新拓扑图的显示或执行其他业务逻辑。 4. **图形API**:ActionScript的绘图API允许开发者直接在舞台上绘制自定义图形,这对于创建...

    不错的flex杂志效果

    1. **Flex组件库**:Flex提供了一套丰富的预定义组件,如Button、List、Accordion等,这些组件可以快速搭建用户界面。在杂志效果中,可利用Image、Canvas等组件来展示杂志的封面、内页和广告等内容。 2. **图形和...

    Flex3组件拖放教程

    通过拖放操作,用户能够选择一个对象(例如`List`控件或Flex中的`Image`控件),并将其拖动至另一个组件(容器)中,最终将该对象添加到目标组件内。 #### 二、关于拖放操作 拖放操作主要包括三个阶段:初始化、...

    flex做的购物商店中文版(**推荐**)

    4. **Flex拖拽功能**:在购物商店中,可能实现了一个创新的拖拽功能,允许用户通过拖放操作来选择商品。这利用了Flex的DragManager和DropTarget API,可以增强用户的交互体验。 5. **中文版**:这个版本的购物商店...

    Flex浏览杂志特效

    - Flex Framework:包含丰富的组件库,如Button、TextArea、List等,用于快速构建用户界面。此外,还有一套完整的事件模型和数据绑定机制。 2. 实现杂志翻页特效: - 模拟物理行为:为了达到逼真的翻页效果,...

    Flex UI组件使用全集

    - **ViewStack**: 在多个视图之间切换的容器。 #### Repeatercontrol(重复器组件) - **Repeater**: 可以重复显示数据集合中每一项的容器组件。 #### Printcontrols(打印组件) - **FlexPrintJob、...

    flex 动态生成树

    - `addItem`方法被用来向`subNodes`中添加两个新节点。 - `invalidateList`方法用于通知`Tree`组件数据已更改,需要重新渲染。 - 最后将整个树的数据提供者设置为`treeData`,完成树的构建。 ##### 3. 定义树数据...

Global site tag (gtag.js) - Google Analytics