一个Flex鼠标拖拽图片的简单例子（附源码）

参考了网上诸多例子，自己动手写一个简单的例子，以下只针对关键代码做重点讲解。

该例子仅供初学者参考。

public function dragImage(e:MouseEvent, messages:String):void
{
var dragInitiator:Image=e.currentTarget as Image;
var dragSource:DragSource=new DragSource();
dragSource.addData(messages, "messages"); // Alias for messages

var dragProxy:Image=new Image(); dragProxy.source=e.currentTarget.source;DragManager.doDrag(dragInitiator, dragSource, e, dragProxy);}

public function dragImage(e:MouseEvent, messages:String):void
{
var dragInitiator:Image=e.currentTarget as Image;
var dragSource:DragSource=new DragSource();
dragSource.addData(messages, "messages");	// Alias for messages
var dragProxy:Image=new Image();
dragProxy.source=e.currentTarget.source;
DragManager.doDrag(dragInitiator, dragSource, e, dragProxy);
}

给图片绑定了鼠标左键向下的事件（MouseEvent.MOUSE_DOWN）触发函数dragImage(e:MouseEvent, messages:String)，该函数主要实现4个动作：

var dragInitiator:Image=e.currentTarget as Image;

var dragInitiator:Image=e.currentTarget as Image;

1. 初始化拖动对象dragInitiator，e是当前被触发的事件，e.currentTarget则是事件当前的对象。

var dragSource:DragSource=new DragSource(); dragSource.addData(messages, "messages");

var dragSource:DragSource=new DragSource();
dragSource.addData(messages, "messages");

2. 装载数据对象或数据源dragSource，拖动过程中需要传递的信息必须使用DragSource作为载体。双引号里面的“messages”是被传递对象的别名，到了另一端，我们必须根据这个别名来取出数据。

var dragProxy:Image=new Image(); dragProxy.source=e.currentTarget.source;

var dragProxy:Image=new Image();
dragProxy.source=e.currentTarget.source;

3. 设置代理对象dragProxy，这个对象可以看成是根据源对象产生的一个副本，可以认为是源对象在目标容器中的“影子”，一个临时的对象。

DragManager.doDrag(dragInitiator, dragSource, e, dragProxy);

DragManager.doDrag(dragInitiator, dragSource, e, dragProxy);

4. 将dragInitiator、dragSource、dragProxy，以及鼠标事件e一起提交给DragManager的doDrag方法管理。

public function dragEnterHandler(e:DragEvent):void
{
var dropTarget:Panel=e.currentTarget as Panel; // Note: 'dropTarget' is the target container where the mouse attempts to release

DragManager.acceptDragDrop(dropTarget);
}

public function dragEnterHandler(e:DragEvent):void
{
var dropTarget:Panel=e.currentTarget as Panel;	//	Note: 'dropTarget' is the target container where the mouse attempts to release
DragManager.acceptDragDrop(dropTarget);
}

这个函数是被拖动的对象进入目标容器时触发的，必须将其绑定给目标容器的dragEnter事件，其中值得注意的是，传给DragManager.acceptDragDrop的dropTarget必须是目标容器。

public function dragDropHandler(e:DragEvent):void { var x:Number=e.localX; var y:Number=e.localY; var tarImage:Image=e.dragInitiator as Image; tarImage.x=x; tarImage.y=y; var dropTarget:Panel=e.currentTarget as Panel; dropTarget.addChild(tarImage); var messages:String=String(e.dragSource.dataForFormat("messages")); Alert.show(messages); }

public function dragDropHandler(e:DragEvent):void
{
var x:Number=e.localX;
var y:Number=e.localY;
var tarImage:Image=e.dragInitiator as Image;
tarImage.x=x;
tarImage.y=y;
var dropTarget:Panel=e.currentTarget as Panel;
dropTarget.addChild(tarImage);
var messages:String=String(e.dragSource.dataForFormat("messages"));
Alert.show(messages);
}

同理，这个函数是被拖动的对象进入目标容器后鼠标左键被释放时触发的，必须将其绑定给目标容器的dragDrop事件。

var tarImage:Image=e.dragInitiator as Image;

var tarImage:Image=e.dragInitiator as Image;

此时，我们通过将被拖动的对象e.dragInitiator，以及在这过程中用“messages”别名保存起来的字符串拿出来，把它addChild在dropTarget后面，同时设置好被拖动对象的X,Y坐标，我们就实现了图片的拖拽功能。

有一点需要注意的是，Flex中对对象的引用使用的是地址引用，所以我们看到这段代码

var dropTarget:Panel=e.currentTarget as Panel; dropTarget.addChild(tarImage);

var dropTarget:Panel=e.currentTarget as Panel;
dropTarget.addChild(tarImage);

事实上是将整个被拖动对象挂在了目标容器中。

例如，一个数组：

var intArray:Array=new Array("1","2","3","4","5");

var tempArray:Array;

tempArray=intArray;

tempArray.splice(1,1);

trace(intArray);

输出的结果：1,3,4,5

Test.zip (4.5 MB)

下载次数: 977