`
麻雀咖啡
  • 浏览: 20819 次
  • 性别: Icon_minigender_1
  • 来自: 福建
文章分类
社区版块
存档分类
最新评论

Flex实现拖拽效果

阅读更多
1. acceptDragDrop()方法
public static function acceptDragDrop(target:IUIComponent):void如果接受拖/放数据,将从 dragEnter 事件处理函数调用此方法。例如:
DragManager.acceptDragDrop(event.target);


<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="horizontal">
     <mx:Script>
           <![CDATA[
                import mx.containers.Box;
                import mx.containers.Canvas;
                import mx.events.DragEvent;
                import mx.managers.DragManager;
                import mx.core.DragSource;
                import mx.core.IUIComponent;
                private static const FORMAT:String ="box";
                private function mouseDownHandler(evt:MouseEvent):void
                {
                     var initiator:IUIComponent = evt.currentTarget as IUIComponent;
                     var dragSource:DragSource = new DragSource();
                     dragSource.addData(initiator,FORMAT);//向拖动源添加数据和相应的格式
                     DragManager.doDrag(initiator,dragSource,evt);
                }
                private function dragEnterHandler (evt:DragEvent):void
                {
                     if(evt.dragSource.hasFormat(FORMAT)){//如果数据源包含所有的数据
                           //如果是box类型就接受拖拽
                          DragManager.acceptDragDrop(Canvas(evt.currentTarget));
                     }
                }
                private function dropHandler(evt :DragEvent):void{
                     var box:Box = Box(evt.dragInitiator);//启动拖动的组件。
                     box.x=evt.localX;
                     box.y=evt.localY;
                }
           ]]>
     </mx:Script>
     <mx:Canvas
           id="canvas"
           backgroundColor="#b4b4b4"
           width="300" height="300"
           dragEnter="dragEnterHandler(event);"
           dragDrop="dropHandler(event);">
           <mx:Box id="dragItem"
                width="20" height="20"
                backgroundColor="#534"
                mouseDown="mouseDownHandler(event);">
                
           </mx:Box>
     </mx:Canvas>
</mx:Application>

当<mx:Box>实例调度mouseDown事件的时候,mouseDownHandler方法则被调用,并且一个DataSource数据对象被添加到DragManager中,DragManager.doDrag方法启动一个拖拽的操作,需要输入至少三个参数,拖拽启动器项目的引用,一个DragSource对象,以及调用事件处理器并包含有光拖拽操作鼠标参数的MouseEvent对象。
Canvas 组件通过对DragManager所调度的dragEnter和dragDrop事件设置事件处理器,因此这个Canvas组件被认为是Box组件所启动的拖放动作的目标,在dragEnterHandler方法中,检查拖拽源数据格式,并使用DragManager对象的静态acceptDragDrop方法使放置动作生效,其中拖拽数据源的数据格式最初是在doDrag方法中设置的,acceptDragdrop方法的参数是相应拖拽事件(例如drapDrop事件)的拖放目标。应用程序中的dropHandler方法相应放置动作,并基于鼠标按键放开时的指针位置,来决定移动过来的启动器(在这边就是box组件)的位置。
2. 复制
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="horizontal">
     <mx:Script>
           <![CDATA[
                import mx.containers.Box;
                import mx.containers.Canvas;
                import mx.events.DragEvent;
                import mx.managers.DragManager;
                import mx.core.DragSource;
                import mx.core.IUIComponent;
                private static const FORMAT:String ="box";
                private function mouseDownHandler(evt:MouseEvent):void
                {
//                     var initiator:IUIComponent = evt.currentTarget as IUIComponent;
                           var initiator:Box = evt.currentTarget as Box;
                           var boxData:Object = new Object();
                           boxData.width=initiator.width;
                           boxData.height=initiator.height;
                          boxData.backgroundColor=initiator.getStyle("backgroundColor");
                    var dragSource:DragSource = new DragSource();//存放着拖拽中的数据
                     dragSource.addData(boxData,FORMAT);//向拖动源添加数据和相应的格式
                     DragManager.doDrag(initiator,dragSource,evt);
                }
                private function dragEnterHandler (evt:DragEvent):void
                {
                     if(evt.dragSource.hasFormat(FORMAT)){//如果数据源包含所有的数据
                           //如果是box类型就接受拖拽
                          DragManager.acceptDragDrop(Canvas(evt.currentTarget));
                     }
                }
                private function dropHandler(evt :DragEvent):void{
//                     var box:Box = Box(evt.dragInitiator);//启动拖动的组件。
//                     box.x=evt.localX;
//                     box.y=evt.localY;
                                var boxData:Object= evt.dragSource.dataForFormat(FORMAT)
                                //检索指定格式的数据。如果此数据是使用 addData() 方法添加的,则可以直接返回此数据。如果此数据是使用 addHandler() 方法添加的,则需调用处理程序函数来返回此数据。
                                //参数  format:String — 字符串,用于指定一个标签来描述要返回的数据的格式。
                                 var box:Box = new Box();
                                box.width=boxData.width;
                                box.height=boxData.height;
                                box.setStyle("backgroundColor",boxData.backgroundColor);
                                box.x=evt.localX;
                                box.y=evt.localY;
                                //添加监听的方法
                                box.addEventListener(MouseEvent.MOUSE_DOWN,mouseDownHandler);
                                canvas.addChild(box);
                }
           ]]>
     </mx:Script>
     <mx:Canvas
           id="canvas"
           backgroundColor="#b4b4b4"
           width="300" height="300"
           dragEnter="dragEnterHandler(event);"
           dragDrop="dropHandler(event);">
           <mx:Box id="dragItem"
                width="20" height="20"
                backgroundColor="#534"
                mouseDown="mouseDownHandler(event);">
               
           </mx:Box>
     </mx:Canvas>
</mx:Application>

分享到:
评论

相关推荐

    Flex拖拽控件效果

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

    Flex4实现拖拽功能

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

    flex拖拽效果

    要实现拖拽效果,我们可以遵循以下步骤: 1. **事件监听**:首先,我们需要监听鼠标的`mousedown`、`mousemove`和`mouseup`事件。`mousedown`事件用于开始拖动,`mousemove`事件在拖动过程中更新元素的位置,而`...

    flex翻书效果 flex翻书效果

    Flex翻书效果是一种在网页或应用中实现模拟真实书籍翻页动画的技术,它利用了CSS3中的Flexbox布局模型和一些动态效果来创造出逼真的翻页体验。在现代Web开发中,这种效果常用于电子书、杂志或者产品展示等场景,以...

    Flex可以拖拽的panel

    以下是一个简单的实现拖拽功能的Panel组件示例: ```actionscript public class DraggablePanel extends Panel { private var _dragStartX:Number; private var _dragStartY:Number; public function ...

    flex 拖拽效果程序

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

    Flex水波纹效果project

    Flex水波纹效果项目是一种基于Adobe Flex技术实现的动态视觉效果,主要应用于用户界面设计,为用户提供更加生动、直观的交互体验。Flex是基于ActionScript 3.0和MXML的开源框架,它允许开发者创建丰富的互联网应用...

    flex实现翻书效果

    在本项目中,我们将探讨如何使用Flex来实现一个逼真的翻书效果。 在Flex中实现翻书效果主要涉及以下几个关键技术点: 1. **3D效果**:Flex 4引入了全新的Spark组件架构,支持硬件加速的3D渲染。这使得我们可以通过...

    Flex实现拓扑,可以拖动 画线等

    在本案例中,"Flex实现拓扑,可以拖动 画线等",指的是利用Flex技术开发了一个具有拓扑图展示功能的应用,该应用允许用户进行节点拖动和连线绘制,提高了用户体验和互动性。 拓扑图通常用于表示网络、系统或流程中...

    flex拖拽

    - **绝对定位**:为了实现拖拽效果,通常需要将元素设置为绝对定位,以便通过修改其`left`和`top`属性改变位置。 - **交互反馈**:在拖动过程中,可能需要通过CSS更改元素的样式(如透明度或边框),提供视觉反馈...

    flex tree 拖拽

    综上所述,实现 Flex Tree 的拖拽功能需要理解 Flex 的 DragManager 机制,掌握 Tree 控件的拖放属性和事件,以及如何处理数据模型的变化。通过精心设计和优化,可以创建出交互性强、易用性好的树形数据操作界面。在...

    Flex拖拽库flex拖拽库

    在Flex中,拖拽功能是一项重要的用户界面交互机制,允许用户通过鼠标操作将元素从一个位置移动到另一个位置,提升了用户体验。本篇文章将详细讲解Flex拖拽库的相关知识点。 一、Flex中的拖放(Drag-and-Drop)机制 1...

    Flex关于拖拽编程

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

    Flex 拖动 放大缩小

    拖动功能在Flex中是通过鼠标事件处理来实现的。当用户按下鼠标按钮并移动鼠标时,程序会捕获这些事件并更新相应对象的位置。通常,我们需要在组件上添加`mousedown`、`mousemove`和`mouseup`事件监听器。在`...

    flex 3D拖拽不同角度观看

    以下是一个简单的示例代码片段,展示了如何实现拖拽功能: ```actionscript import org.papervision3d.objects.primitives.Box; import org.papervision3d.view.Viewport3D; import org.papervision3d.cameras....

    不错的flex杂志效果

    Flex杂志效果是一种基于Adobe Flex技术实现的数字出版物模拟翻页效果,常见于电子杂志、电子报纸等在线阅读应用中。这种效果通过动态渲染页面,模拟真实的纸张翻页动作,带给用户更接近传统纸质阅读体验的交互感受。...

    flex 拖拽的例子

    在本文中,我们将深入探讨如何在Flex环境中实现拖放(Drag & Drop)功能,这是一个非常实用的用户交互设计。Flex是一种基于ActionScript和MXML的开源框架,用于构建富互联网应用程序(RIA)。拖放功能在Flex应用中...

    flex 图片画线,拖动

    在IT行业中,尤其是在Web开发领域,"flex 图片画线,拖动"是一个常见的交互功能需求,用于增强用户体验。这个功能通常涉及到HTML5、CSS3和JavaScript等技术,特别是Flex布局和SVG图形技术。让我们详细探讨一下这个...

    flex实现真正的翻书效果

    在本项目中,"flex实现真正的翻书效果"是指使用Flex来创建一个虚拟的电子书应用,用户可以通过类似翻页的动作浏览内容,从而提供更为真实的阅读体验。 1. **Flex组件库**:Flex提供了一套完整的组件库,包括按钮、...

    flex 苹果桌面效果的弹出窗口

    标题中的“flex 苹果桌面效果的弹出窗口”指的是使用Adobe Flex技术在苹果桌面环境中实现类似苹果OS X系统的弹出窗口效果。Flex是一种开源的、基于ActionScript的框架,用于构建富互联网应用程序(RIA),它允许...

Global site tag (gtag.js) - Google Analytics