`
柴秉承
  • 浏览: 87566 次
  • 性别: Icon_minigender_1
  • 来自: 厦门
社区版块
存档分类
最新评论

Flex UI拖放 (转载)

    博客分类:
  • FLEX
 
阅读更多

一、最简单的是直接调用ui组件的startDrag方法和stopDragging方法,这2个方法是flash中的所有继承于Sprite类的组件类都支持的。适用于在同一个容器中的拖拽。

思路是监听需要拖拽的组件的MOUSE_DOWNMOUSE_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_ENTERDRAG_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_DOWNMOUSE_UPMOUSE_MOVE事件,有时拖拽的目标容器也要监听MOUSE_UP事件。然后在MOUSE_MOVE事件的监听函数中改变ui组件的xy值。相对前两种方法,这种方法实现起来就比较烦琐。具体事件这里就不写了.

 

    总之,在flash的拖拽实现要比在js中容易一些。

分享到:
评论

相关推荐

    Flex拖拽控件效果

    这个主题聚焦于“Flex拖拽控件效果”,这是一项常见的用户交互功能,允许用户通过鼠标操作移动UI元素,提升应用的易用性和互动性。 在Flex中,实现拖放(Drag and Drop)功能主要涉及两个核心类:`DragManager`和`...

    Flex拖拽库flex拖拽库

    3. 第三方库:除了Flex自身的拖放支持,还有一些第三方库,如DragAndDropLib,提供了更高级的功能和定制选项,例如复杂的拖放规则、多层嵌套的拖放等。 综上所述,Flex的拖放功能是其强大用户界面设计能力的一部分...

    Flex3学习指南-是初学者学习Flex必备资料1

    6. **数据绑定**:Flex中的数据绑定允许UI元素与数据源直接关联,当数据源变化时,UI会自动更新,反之亦然。这是Flex实现动态UI的关键特性。 7. **事件处理**:在Flex中,事件驱动编程是常见的模式,用户与UI交互时...

    flex_api (FLEX接口)

    Flex API支持数据绑定,这意味着UI组件可以直接与数据模型关联,当数据模型发生变化时,UI会自动更新。这简化了应用程序的开发,减少了手动同步数据和视图的工作。 6. **事件驱动编程** Flex API遵循事件驱动的...

    flex中拖拉拽好实例objecthandles

    在Flex编程领域,拖放(Drag and Drop)功能是一个常用且重要的交互设计,它使得用户可以通过简单的拖动操作来移动、复制或关联UI元素。在本实例中,我们关注的是"flex中拖拉拽好实例objecthandles",这是一项利用...

    flex全书籍 flex全书籍

    6. **Flex Builder/Flash Builder**:Adobe的集成开发环境(IDE),提供了图形化的组件拖放、代码提示、调试等功能,大大提升了Flex开发效率。 7. **Flex应用生命周期**:从初始化、布局计算、绘制到事件处理,理解...

    Flex 4 Cookbook 英文版( pdf 非影印版)

    - **Flex组件和UI设计**:介绍各种Flex UI组件的使用方法,如数据绑定、样式化和布局管理。 - **ActionScript编程**:讲解如何使用ActionScript语言增强Flex应用的功能,包括事件处理、网络通信和数据操作等。 - **...

    Flex Air 学习资料\01.Flex概述.rar

    9. **数据绑定**:Flex支持数据绑定,这意味着UI组件的状态可以直接与应用程序数据关联,当数据发生变化时,UI会自动更新,反之亦然。 10. **事件驱动编程**:Flex应用基于事件驱动模型,用户交互和其他系统事件...

    Adobe-Flex-简介.doc

    Flex的核心概念在于它的组件模型,开发者可以通过拖放MXML元件来构建用户界面,并使用ActionScript来定义行为。MXML使得UI设计与代码分离,提高了开发效率和代码的可维护性。 **2. Flex 工作原理** **2.1 Flex ...

    flex总制作可拖拽的网络拓扑图实例

    首先,Flex中的Spark组件库为我们提供了基础的UI组件,如Button、Label等,同时也包含了对拖放(drag-and-drop)功能的支持。在我们的网络拓扑图实例中,我们主要利用Spark组件的拖放API来实现节点的拖拽功能。拖放...

    《Flex 4实战》.pdf

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

    flex 音频播放器

    至于界面设计,Flex提供了一系列的UI组件,如`VSlider`用于音量控制,`HSlider`或`Timeline`用于播放位置拖放。这些组件可以通过MXML或ActionScript进行布局和定制,以创建符合用户需求的界面。 在实际项目中,我们...

    flex builder 4 help

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

    flex2中文学习资料

    Flex2提供了丰富的组件集合,包括按钮、表格、面板、菜单等,这些组件都是预先构建的,可以直接拖放到应用中使用。通过自定义这些组件,开发者可以快速构建复杂的用户界面。 5. **数据绑定** Flex2中的数据绑定...

    flex 使用swc 包

    2. **组件**:Flex组件是UI元素,如按钮、文本框等,它们预先封装好了样式和行为,开发者可以直接拖放到应用程序中使用。 3. **资源**:包括图片、字体、样式表等,这些资源可以被多个组件或类共享。 4. **元数据**...

    Flex4实战完整版(1)

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

    flex Demo

    6. **Flex组件**:Flex组件库包含大量预定义的UI元素,如Button、Label、List、Canvas等,开发者可以快速构建出美观的用户界面。此外,Flex还支持自定义组件,以便满足特定需求。 7. **Flex Builder/IDE**:Adobe ...

    常用Flex网站常用Flex网站

    1. 用户体验:Flex网站可以提供与桌面应用相似的交互体验,包括拖放功能、实时数据更新和复杂的用户界面元素,这在传统的HTML页面中可能难以实现。 2. 跨平台兼容性:Flex基于开放标准的Flash Player运行时,因此...

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

    - 如果需要在拖放过程中更新UI,确保使用`validateNow()`或`validateDisplayList()`方法来强制立即刷新显示列表。 - 考虑到性能,可能需要在拖放开始时暂停自动重绘,而在拖放结束时恢复。 通过以上步骤,你可以...

Global site tag (gtag.js) - Google Analytics