Flex的拖动事件 DragEvent DragManager

 

import mx.core.IUIComponent;
import mx.events.DragEvent;
import mx.managers.DragManager;

private function dragEnter(event:DragEvent):void
{
     var obj:IUIComponent = IUIComponent(event.currentTarget);
     DragManager.acceptDragDrop(obj);
}

事件执行顺序

开始执行：  

             dragStart（仅源数据容器触发）

             dragEnter（仅源数据容器触发）

            
             dragExit（如果拖动到数据容器外面，仅源数据容器触发）

             dragEnter（仅目标数据容器触发）
                              
             dragOver（如果拖动到数据容器外面，则目标数据容器触发，否则仅源数据容器都触发）

             dragDrop（如果拖动到数据容器外面，则目标数据容器触发，否则仅源数据容器都触发）
            
             dragComplete（仅源数据容器触发）

 

 

侦听事件管理--让你的控件可拖拽

Flex 组件内置了处理拖拽事件的接口，甚至有些控件以及实现了拖拽功能：List、DataGrid、Menu、TileList、Tree。

关于拖拽的有关属性，是这些控件共有的，默认值都是false：

allowDragSelection：是否可拖拽  //不知道有什么用
allowMultipleSelection：是否可多选，如果可以，按Ctrl 添加元素，Shift 反选元素。

dragEnabled：是否可以拖动子元素
dragMoveEnabled：是否移动元素位置，而不是复制元素，建议将这个设置为true。如果设置为false，将出现重复数据。
dropEnabled：是否可以将物体放置进来

拖动功能限于在相同类型的控件间使用，且不同控件数据源的数据结构必须可以兼容。

在Flex 中，有几个专门的对象供开发者处理拖拽事件：

DragManager：mx.managers 包中，管理拖拽事件
DragSource：mx.core 包中，是Flex 框架的核心成员，处理拖拽中的数据传递

DragEvent:：mx.events 包中，拖拽操作中的事件对象

拖拽操作中至少有两个对象：提供数据的对象，接收数据的对象。提供数据的对象按照前后顺序分为以下事件：

mouseDown：鼠标按下
mouseMove：鼠标移到

dragComplete：鼠标释放。判断目标是否能接受数据，如果可以，拖放成功。

接受方的事件：

dragEnter：被拖动对象移动到目标范围时
dragOver：鼠标移动到目标上
dragDrop：鼠标在目标上松开
dragExit：对象被拖离目标范围

开始拖拽对象,doDrag方法初始化拖拽动作中的所有数据（意味着这个方法应该写在源对象）：
DragManager.doDrag(
  dragInitiator：派发拖拽事件的目标对象
  dragSource：拖拽中的数据源，用来传递数据。通过定义DragSource对象来设置数据源，该对象的方法 addData(obj, "name") 可以添加数据。然后使用dataForFormat("name") 来获取数据，使用前用hasFormat("name) 来判断是否存在该对象。
  mouseEvent：鼠标事件对象，包含了拖拽事件开始时的鼠标信息
  dragImage：可选，一个可视化的Flex 组件，用来代替目标对象的显示，将在拖拽过程中一直跟随鼠标。如果没有指定，默认会使用一个矩形来代替。
  xOffset：x坐标位移量，默认0，表示dragImage 和 目标对象左端的距离
  yOffset：y坐标位移量，默认0，表示dragImage 和 目标对象顶端的距离
  imageAlpha：默认0.5，表示 dragImage 的透明度，0-1
  allowMove：是否允许移动，默认true，实际上这个属性不影响动作
);

 

acceptDragDrop(traget:IUIComponent)
表示对象同意接受拖拽到数据，如果不接受，物体将无法再该对象上拖放。traget 为设置的对象。（写在目标对象）

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" creationComplete="initApp()">
<mx:Style source="style.css" />

<mx:Script>
<![CDATA[
import mx.managers.DragManager;
import mx.core.DragSource;
import mx.events.DragEvent;

internal function initApp():void{
img.addEventListener(MouseEvent.MOUSE_DOWN,dragHandler);
//
canvas_1.addEventListener(DragEvent.DRAG_ENTER,enterHandler);
canvas_1.addEventListener(DragEvent.DRAG_DROP,dropHandler);
}
//
internal function dragHandler(evt:MouseEvent):void{
//拖拽的对象
var dragTarget:Image=Image(evt.currentTarget);
//创建拖拽数据源
var ds:DragSource = new DragSource();
var obj:Object = new Object();
obj.name = "Image"+Math.random()*100;
ds.addData(obj,"image");
//创建拖拽过程中显示的对象，可以是任意的组件
var imgProxy:Image = new Image();
imgProxy.source = img.source;
imgProxy.width = 72;
imgProxy.height = 22;
//开始拖拽
DragManager.doDrag(dragTarget, ds, evt, imgProxy,0,0,0.8);

}
//
internal function enterHandler(evt:DragEvent):void{
DragManager.acceptDragDrop(Canvas(evt.target));
}

internal function dropHandler(evt:DragEvent):void{
//
var newImg:Image = new Image();
newImg.source = img.source;
canvas_1.addChild(newImg);

newImg.x = canvas_1.mouseX;
newImg.y = canvas_1.mouseY;

var obj:Object = evt.dragSource.dataForFormat("image");
newImg.toolTip = obj.name;
}
]]>
</mx:Script>
<mx:Canvas id="canvas_1" styleName="box" x="50" y="150" width="265" height="231">
</mx:Canvas>
<mx:Image id="img" x="51" y="97" source="FlexLogo.gif"/>

</mx:Application>