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拖拽控件效果”,这是一项常见的用户交互功能,允许用户通过鼠标操作移动UI元素,提升应用的易用性和互动性。 在Flex中,实现拖放(Drag and Drop)功能主要涉及两个核心类:`DragManager`和`...
在本主题中,我们将深入探讨如何在Flex4中实现图片的拖放功能,包括两种模式:拖动图片不删除原图和拖动图片后删除原图。 首先,我们需要了解Flex4中的DragManager类,它是实现拖放操作的核心。DragManager提供了...
要实现拖拽效果,我们可以遵循以下步骤: 1. **事件监听**:首先,我们需要监听鼠标的`mousedown`、`mousemove`和`mouseup`事件。`mousedown`事件用于开始拖动,`mousemove`事件在拖动过程中更新元素的位置,而`...
Flex翻书效果是一种在网页或应用中实现模拟真实书籍翻页动画的技术,它利用了CSS3中的Flexbox布局模型和一些动态效果来创造出逼真的翻页体验。在现代Web开发中,这种效果常用于电子书、杂志或者产品展示等场景,以...
以下是一个简单的实现拖拽功能的Panel组件示例: ```actionscript public class DraggablePanel extends Panel { private var _dragStartX:Number; private var _dragStartY:Number; public function ...
标题"flex 拖拽效果程序"表明我们将关注的是如何在Flex中创建一个具有拖放功能的程序。在Flex中,这种功能主要通过DragManager和UIComponent类的拖放API来实现。让我们详细了解一下实现拖放效果的过程。 1. **启用...
Flex水波纹效果项目是一种基于Adobe Flex技术实现的动态视觉效果,主要应用于用户界面设计,为用户提供更加生动、直观的交互体验。Flex是基于ActionScript 3.0和MXML的开源框架,它允许开发者创建丰富的互联网应用...
在本项目中,我们将探讨如何使用Flex来实现一个逼真的翻书效果。 在Flex中实现翻书效果主要涉及以下几个关键技术点: 1. **3D效果**:Flex 4引入了全新的Spark组件架构,支持硬件加速的3D渲染。这使得我们可以通过...
在本案例中,"Flex实现拓扑,可以拖动 画线等",指的是利用Flex技术开发了一个具有拓扑图展示功能的应用,该应用允许用户进行节点拖动和连线绘制,提高了用户体验和互动性。 拓扑图通常用于表示网络、系统或流程中...
- **绝对定位**:为了实现拖拽效果,通常需要将元素设置为绝对定位,以便通过修改其`left`和`top`属性改变位置。 - **交互反馈**:在拖动过程中,可能需要通过CSS更改元素的样式(如透明度或边框),提供视觉反馈...
综上所述,实现 Flex Tree 的拖拽功能需要理解 Flex 的 DragManager 机制,掌握 Tree 控件的拖放属性和事件,以及如何处理数据模型的变化。通过精心设计和优化,可以创建出交互性强、易用性好的树形数据操作界面。在...
在Flex中,拖拽功能是一项重要的用户界面交互机制,允许用户通过鼠标操作将元素从一个位置移动到另一个位置,提升了用户体验。本篇文章将详细讲解Flex拖拽库的相关知识点。 一、Flex中的拖放(Drag-and-Drop)机制 1...
Flex的拖放功能允许开发者进行高度自定义,例如,通过重写默认的行为,实现更复杂的交互逻辑,或者创建自定义的拖放效果。 综上所述,Flex的拖拽编程提供了一套完整的机制,从启动拖放、控制拖动代理到处理数据...
拖动功能在Flex中是通过鼠标事件处理来实现的。当用户按下鼠标按钮并移动鼠标时,程序会捕获这些事件并更新相应对象的位置。通常,我们需要在组件上添加`mousedown`、`mousemove`和`mouseup`事件监听器。在`...
以下是一个简单的示例代码片段,展示了如何实现拖拽功能: ```actionscript import org.papervision3d.objects.primitives.Box; import org.papervision3d.view.Viewport3D; import org.papervision3d.cameras....
Flex杂志效果是一种基于Adobe Flex技术实现的数字出版物模拟翻页效果,常见于电子杂志、电子报纸等在线阅读应用中。这种效果通过动态渲染页面,模拟真实的纸张翻页动作,带给用户更接近传统纸质阅读体验的交互感受。...
在本文中,我们将深入探讨如何在Flex环境中实现拖放(Drag & Drop)功能,这是一个非常实用的用户交互设计。Flex是一种基于ActionScript和MXML的开源框架,用于构建富互联网应用程序(RIA)。拖放功能在Flex应用中...
在IT行业中,尤其是在Web开发领域,"flex 图片画线,拖动"是一个常见的交互功能需求,用于增强用户体验。这个功能通常涉及到HTML5、CSS3和JavaScript等技术,特别是Flex布局和SVG图形技术。让我们详细探讨一下这个...
在本项目中,"flex实现真正的翻书效果"是指使用Flex来创建一个虚拟的电子书应用,用户可以通过类似翻页的动作浏览内容,从而提供更为真实的阅读体验。 1. **Flex组件库**:Flex提供了一套完整的组件库,包括按钮、...
标题中的“flex 苹果桌面效果的弹出窗口”指的是使用Adobe Flex技术在苹果桌面环境中实现类似苹果OS X系统的弹出窗口效果。Flex是一种开源的、基于ActionScript的框架,用于构建富互联网应用程序(RIA),它允许...