Flex之使用DragManager实现对象拖动

被拖动对象：Image

放下目标：FlowBox(Flex FlowBox Container 是 Tony 编写的一个组件,这个组件除了拥有Container的特性之外,还有一个特点是:如果容器的子组件在一行放不下,它会自动根据空间换到下一行。)

实现目标：将Image图像拖动到目标FlowBox并放下

实现代码：

1、导入命名空间

 

Code
import mx.containers.Box;
import mx.containers.Canvas;
import mx.core.UIComponent;
import mx.messaging.AbstractConsumer;
import mx.events.DragEvent;
import mx.controls.Alert;
import mx.managers.DragManager;
import mx.core.DragSource;

 

２、定义对象

Image的dragit事件定义图片允许被拖动，y是一个字符串，代表我拖动的对象的属性值，可以根据需要修改

Code
<mx:Image x="404" y="106" id="Y" source="{Y1}"  mouseDown="dragit(event,'Y')"/>
<ns1:FlowBox backgroundAlpha="0" backgroundColor="#FFFFFF" id="fb" x="10" y="216" width="423" height="238" borderColor="#010101" borderStyle="solid" dragEnter="dragEnterHandler(event);" dragExit="dragExitHandler(event);"  dragDrop="dragDropHandler(event);">
 </ns1:FlowBox>

 

3、编写dragit、dragEnterHandler、dragExitHandler、dragDropHandler方法

Code
///<summary>
///拖动事件
///<param>event:鼠标事件</param>
///<param>type:类型</param>
///</summary>
private function dragit(event:MouseEvent,type:String):void
{
    var di:Image = event.currentTarget as Image;
    var ds:DragSource = new DragSource();
    ds.addData(type,"type");
    ds.addData(di,"img");
    var dragProxy:Image = new Image();
    dragProxy.source = event.currentTarget.source;
    DragManager.doDrag(di, ds, event, dragProxy);
}

///<summary>
///拖动句柄，指定放下对象
///<param>event</param>
///</summary>
private function dragEnterHandler(event:DragEvent):void
{
    var dt:FlowBox = event.currentTarget as FlowBox;
    dt.setStyle("borderThickness", 2);
    DragManager.acceptDragDrop(dt);
}
///<summary>
///拖动放下事件，恢复目标外观
///<param>event</param>
///</summary>
private function dragExitHandler(event:DragEvent):void
{
    var droptarget:FlowBox = event.currentTarget as FlowBox;
    droptarget.setStyle("borderThickness",1);
}
private function dragDropHandler(event:DragEvent):void
{
    var ds:Image = event.dragSource as Image;
    var dt:FlowBox = event.currentTarget as FlowBox;
    var type:String = event.dragSource.dataForFormat("type") as String;
    var value:int = event.dragSource.dataForFormat("value") as int;
    dt.setStyle("borderThickness",1);
    var img:Image = new Image();
    img.source = new Bitmap(getBitmapData(event.dragSource.dataForFormat("img") as DisplayObject));
    img.doubleClickEnabled = true;
    img.addEventListener(MouseEvent.DOUBLE_CLICK,RemoveObject);
    dt.addChild(img as DisplayObject);
}
///<summary>
///绘制位图
///<param>target:目标位图</param>
///</summary>
private function getBitmapData(target:DisplayObject):BitmapData
{
    var res:BitmapData = new BitmapData(target.width, target.height);
    res.draw(target);
    return res;
}
///<summary>
///移除对象
///<param>event</param>
///</summary>
private function RemoveObject(event:MouseEvent):void
{
    //阻止冒泡
    event.stopImmediatePropagation();
    var obj:Image = event.currentTarget as Image;
    obj.parent.removeChild(obj);
}