<?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>
分享到:
相关推荐
1. 拖动源组件:拖动操作的起点,通常是一个可交互的UI组件,如`List`、`Button`等。要启用拖放功能,需要在组件上监听`mouseDown`事件,并调用`DragManager.doDrag()`方法启动拖动。 2. 拖动图像:在拖动过程中...
此代码展示了如何初始化两个`List`控件,其中一个作为拖动发起者,另一个作为拖放目标,从而实现数据的动态交互与管理。通过设置`dragEnabled`和`dragMoveEnabled`属性,我们确保了列表项的拖动功能得以启用,而`...
在Flex中,我们可以为任何UIComponent创建一个DragSource,定义拖动时的数据。例如,如果要拖动一个列表项,我们可以这样设置: ```actionscript var dragSource:DragSource = new DragSource(); dragSource....
这种功能在视觉应用中尤其有用,比如在两个列表之间拖动数据项、重新定位容器中的控件或是将Flex组件从一个容器移动到另一个容器。 #### 二、Flex拖拽的工作原理 ##### 1. **初始化阶段**: - 用户通过鼠标选择...
在这个例子中,我们有两个`Tree`组件,它们都启用了拖拽功能(`dragEnabled="true"`和`dropEnabled="true"`),并且其中一个还允许拖拽时移动元素(`dragMoveEnabled="true"`)和多选(`allowMultipleSelection="true"`)....
在Flex开发中,"两个列表框之间传递"是一种常见的用户界面交互设计,它涉及到数据的双向绑定和事件处理。Flex是Adobe开发的一款用于构建富互联网应用程序(RIA)的框架,它基于ActionScript和MXML,提供了丰富的图形...
Flex会显示一个被称为“拖动代理”的图形,用于表示正在拖拽的数据项。被拖拽的数据项称为“拖拽源”。 - **放下**:当用户释放鼠标按键或将拖拽的项放置在一个有效的目标上时,触发放下操作。此时,应用程序会检查...
接下来,在Vue模板中,我们可以创建两个`draggable`元素,分别代表不同的列表。通过`v-model`绑定数据,`v-bind`传递配置,以及监听`@end`事件来处理拖放结束后的行为: ```html <draggable class="selected-list" ...
5. **组件自定义**:可能需要自定义一个继承自Flex内置组件(如Canvas或List)的类,以便添加拖放功能。自定义组件可以覆盖`startDrag()`和`stopDrag()`方法,以及其他与拖放相关的处理函数。 6. **布局管理器**:...
4. **基于列表的组件**:Flex提供了多种基于列表的组件,如List、Tree、Menu、TileList、HorizontalList等。这些组件用于以不同的视觉形式展示一组集合的数据。例如,List以垂直列的形式展示数据,而HorizontalList...
下面我们将深入探讨如何利用Vue.js实现一个拖拽元素的插件。 首先,我们需要引入一个名为`vuedraggable`的第三方库。`vuedraggable`是基于Sortable.js的Vue组件,它允许我们在Vue实例中轻松实现拖放功能。你可以...
3. **事件处理**:利用Flex的事件模型,可以监听用户的交互,如点击、拖动等,以便更新拓扑图的显示或执行其他业务逻辑。 4. **图形API**:ActionScript的绘图API允许开发者直接在舞台上绘制自定义图形,这对于创建...
1. **Flex组件库**:Flex提供了一套丰富的预定义组件,如Button、List、Accordion等,这些组件可以快速搭建用户界面。在杂志效果中,可利用Image、Canvas等组件来展示杂志的封面、内页和广告等内容。 2. **图形和...
通过拖放操作,用户能够选择一个对象(例如`List`控件或Flex中的`Image`控件),并将其拖动至另一个组件(容器)中,最终将该对象添加到目标组件内。 #### 二、关于拖放操作 拖放操作主要包括三个阶段:初始化、...
4. **Flex拖拽功能**:在购物商店中,可能实现了一个创新的拖拽功能,允许用户通过拖放操作来选择商品。这利用了Flex的DragManager和DropTarget API,可以增强用户的交互体验。 5. **中文版**:这个版本的购物商店...
- Flex Framework:包含丰富的组件库,如Button、TextArea、List等,用于快速构建用户界面。此外,还有一套完整的事件模型和数据绑定机制。 2. 实现杂志翻页特效: - 模拟物理行为:为了达到逼真的翻页效果,...
- **ViewStack**: 在多个视图之间切换的容器。 #### Repeatercontrol(重复器组件) - **Repeater**: 可以重复显示数据集合中每一项的容器组件。 #### Printcontrols(打印组件) - **FlexPrintJob、...
- `addItem`方法被用来向`subNodes`中添加两个新节点。 - `invalidateList`方法用于通知`Tree`组件数据已更改,需要重新渲染。 - 最后将整个树的数据提供者设置为`treeData`,完成树的构建。 ##### 3. 定义树数据...