一、最简单的是直接调用ui组件的startDrag方法和stopDragging方法,这2个方法是flash中的所有继承于Sprite类的组件类都支持的。适用于在同一个容器中的拖拽。
思路是监听需要拖拽的组件的MOUSE_DOWN和MOUSE_UP事件,剩下来的有flash帮你自动完成。
例子
private static function init():void{
myVBox.addEventListener(MouseEvent.MOUSE_DOWN,startDragging);
myVBox.addEventListener(MouseEvent.MOUSE_UP, stopDragging);
}
// 按下鼠标按键时会调用此函数。
private static function startDragging(event:MouseEvent):void
{
event.currentTarget.startDrag();
}
// 松开鼠标按键时会调用此函数。
private static function stopDragging(event:MouseEvent):void
{
event.currentTarget.stopDrag();
}
二、借助DragManager实现拖拽。好处是可以方便的控制哪些容器支持被拖拽,也就是方便的订制拖拽的业务规则。适用于多个容器之间的拖拽。
假设把a组件从b容器拖拽到c容器
思路是对a监听鼠标MOUSE_DOWN事件,对c监听DRAG_ENTER和DRAG_DROP事件。其他的由flash完成。
例子
private function init():void
{
a.addEventListener(MouseEvent.MOUSE_DOWN, mouseDownHandler);
c.addEventListener(DragEvent.DRAG_ENTER,dragEnterHandler);
c.addEventListener(DragEvent.DRAG_DROP,dragDropHandler);
}
private static function mouseDownHandler(event:MouseEvent):void
{
var dragInitiator:UIComponent=UIComponent(event.currentTarget);
var ds:DragSource = new DragSource();
ds.addData(dragInitiator, "myRule");
DragManager.doDrag(dragInitiator, ds, event);
}
private static function dragEnterHandler(event:DragEvent):void {
if (event.dragSource.hasFormat("myRule "))
{
DragManager.acceptDragDrop(event.currentTarget);
}
}
private static function dragDropHandler(event:DragEvent):void {
var dragObject:UIComponent=UIComponent(event.dragInitiator);
dragObject.x = Container(event.currentTarget).mouseX;
dragObject.y =Container(event.currentTarget).mouseY;
if(dragObject.parent!=event.currentTarget){
Container(event.currentTarget).addChild(dragObject);
}
}
以上的例子中,c只接受带有“myRule”格式文字的拖动对象
三、完全自己实现拖拽功能。拖拽无非是ui组件跟着鼠标移动。所以需要监听推拽逐渐的MOUSE_DOWN,MOUSE_UP,MOUSE_MOVE事件,有时拖拽的目标容器也要监听MOUSE_UP事件。然后在MOUSE_MOVE事件的监听函数中改变ui组件的x和y值。相对前两种方法,这种方法实现起来就比较烦琐。具体事件这里就不写了.
总之,在flash的拖拽实现要比在js中容易一些。
分享到:
相关推荐
这个主题聚焦于“Flex拖拽控件效果”,这是一项常见的用户交互功能,允许用户通过鼠标操作移动UI元素,提升应用的易用性和互动性。 在Flex中,实现拖放(Drag and Drop)功能主要涉及两个核心类:`DragManager`和`...
3. 第三方库:除了Flex自身的拖放支持,还有一些第三方库,如DragAndDropLib,提供了更高级的功能和定制选项,例如复杂的拖放规则、多层嵌套的拖放等。 综上所述,Flex的拖放功能是其强大用户界面设计能力的一部分...
6. **数据绑定**:Flex中的数据绑定允许UI元素与数据源直接关联,当数据源变化时,UI会自动更新,反之亦然。这是Flex实现动态UI的关键特性。 7. **事件处理**:在Flex中,事件驱动编程是常见的模式,用户与UI交互时...
Flex API支持数据绑定,这意味着UI组件可以直接与数据模型关联,当数据模型发生变化时,UI会自动更新。这简化了应用程序的开发,减少了手动同步数据和视图的工作。 6. **事件驱动编程** Flex API遵循事件驱动的...
在Flex编程领域,拖放(Drag and Drop)功能是一个常用且重要的交互设计,它使得用户可以通过简单的拖动操作来移动、复制或关联UI元素。在本实例中,我们关注的是"flex中拖拉拽好实例objecthandles",这是一项利用...
6. **Flex Builder/Flash Builder**:Adobe的集成开发环境(IDE),提供了图形化的组件拖放、代码提示、调试等功能,大大提升了Flex开发效率。 7. **Flex应用生命周期**:从初始化、布局计算、绘制到事件处理,理解...
- **Flex组件和UI设计**:介绍各种Flex UI组件的使用方法,如数据绑定、样式化和布局管理。 - **ActionScript编程**:讲解如何使用ActionScript语言增强Flex应用的功能,包括事件处理、网络通信和数据操作等。 - **...
9. **数据绑定**:Flex支持数据绑定,这意味着UI组件的状态可以直接与应用程序数据关联,当数据发生变化时,UI会自动更新,反之亦然。 10. **事件驱动编程**:Flex应用基于事件驱动模型,用户交互和其他系统事件...
Flex的核心概念在于它的组件模型,开发者可以通过拖放MXML元件来构建用户界面,并使用ActionScript来定义行为。MXML使得UI设计与代码分离,提高了开发效率和代码的可维护性。 **2. Flex 工作原理** **2.1 Flex ...
首先,Flex中的Spark组件库为我们提供了基础的UI组件,如Button、Label等,同时也包含了对拖放(drag-and-drop)功能的支持。在我们的网络拓扑图实例中,我们主要利用Spark组件的拖放API来实现节点的拖拽功能。拖放...
书籍内容覆盖了从基础到进阶的广泛知识,首先介绍Flex的基础概念,包括表单和数据处理,然后逐步深入到核心概念,例如导航、拖放功能和事件处理。书中还详细介绍了如何使用新增的Spark组件、数据服务、图表设计和...
至于界面设计,Flex提供了一系列的UI组件,如`VSlider`用于音量控制,`HSlider`或`Timeline`用于播放位置拖放。这些组件可以通过MXML或ActionScript进行布局和定制,以创建符合用户需求的界面。 在实际项目中,我们...
4. **Graphical Layout(图形布局)**:Flex Builder 4 提供了改进的设计视图,允许开发者通过拖放组件和调整约束来直观地创建界面布局。这一功能大大简化了界面设计过程。 5. **States(状态)**:在Flex 4中,...
Flex2提供了丰富的组件集合,包括按钮、表格、面板、菜单等,这些组件都是预先构建的,可以直接拖放到应用中使用。通过自定义这些组件,开发者可以快速构建复杂的用户界面。 5. **数据绑定** Flex2中的数据绑定...
2. **组件**:Flex组件是UI元素,如按钮、文本框等,它们预先封装好了样式和行为,开发者可以直接拖放到应用程序中使用。 3. **资源**:包括图片、字体、样式表等,这些资源可以被多个组件或类共享。 4. **元数据**...
Flex4中引入了新的ui组件,提供了更好的性能监控,并且大大提高了编译速度。 《Flex4实战》是一本全面的指南,为web设计人员和开发人员提供了Flex的详细介绍。本书从基础讲起,介绍了有关表单和数据的知识,然后...
6. **Flex组件**:Flex组件库包含大量预定义的UI元素,如Button、Label、List、Canvas等,开发者可以快速构建出美观的用户界面。此外,Flex还支持自定义组件,以便满足特定需求。 7. **Flex Builder/IDE**:Adobe ...
1. 用户体验:Flex网站可以提供与桌面应用相似的交互体验,包括拖放功能、实时数据更新和复杂的用户界面元素,这在传统的HTML页面中可能难以实现。 2. 跨平台兼容性:Flex基于开放标准的Flash Player运行时,因此...
- 如果需要在拖放过程中更新UI,确保使用`validateNow()`或`validateDisplayList()`方法来强制立即刷新显示列表。 - 考虑到性能,可能需要在拖放开始时暂停自动重绘,而在拖放结束时恢复。 通过以上步骤,你可以...