Flex 拖动图片的移动和复制其实是一样的,不一样的地方就是在图片拖拽到目标的时候的一个操作,移动是把拖拽的资源直接赋值给一个image对象,相对来说比较简单,就不多说;而复制则是把拖拽的资源中的一些数据取出来,放到一个新的image对象,本例子中是把拖拽资源的大小数据取出,然后根据拖拽资源的长宽创建一个大小一样的bitmapdata对象,把拖拽资源添加到bitmapdata数据中。
在本例中控制复制移动的语句在dragOverHandle方法中,用DragManager来设置拖拽事件中的复制移动情况,直接。拖动是移动,当按着ctrl键是复制。
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
<mx:Script>
<![CDATA[
import mx.controls.Alert;
import mx.containers.Canvas;
import mx.managers.DragManager;
import mx.core.DragSource;
import mx.controls.Image;
import mx.events.DragEvent;
[Embed(source="asset/che1.gif")]
[Bindable]
privatevar che:Class;
[Embed(source="asset/camera.gif")]
[Bindable]
privatevar camera:Class;
privatefunction mouseOverHandle(e:MouseEvent):void{
var dragImag:Image = e.currentTargetas Image;//启动拖动操作的图片
var ds:DragSource =new DragSource();//拖拽资源
ds.addData(dragImag,"img");
var imagProxy:Image =new Image();//拖动过程中显示的拖动虚影
imagProxy.source = che;
imagProxy.height = 30;
imagProxy.width = 30;
DragManager.doDrag(dragImag,ds,e,imagProxy,-15,-15,1,true);
}
privatefunction dragEnterHandle(e:DragEvent):void{
if(e.dragSource.hasFormat("img")){
DragManager.acceptDragDrop(Canvas(e.currentTarget));
}
}
privatefunction dragOverHandle(e:DragEvent):void{
if(e.dragSource.hasFormat("img")){
if(e.ctrlKey){
DragManager.showFeedback(DragManager.COPY);
return ;
}else{
DragManager.showFeedback(DragManager.MOVE);
return;
}
}
DragManager.showFeedback(DragManager.NONE);
}
privatefunction dragDropHandle(e:DragEvent):void{
if(e.dragSource.hasFormat("img")){
var dragImag:Image = e.dragSource.dataForFormat("img")as Image;
var dropCanvas:Canvas = e.currentTargetas Canvas;
var newImag:Image =new Image();
if(e.action == DragManager.COPY){
//复制图片
newImag.source =new Bitmap(getBitmapData(dragImagas DisplayObject));
}else{
//移动图片
newImag.source = dragImag;
}
newImag.x = dropCanvas.mouseX;
newImag.y = dropCanvas.mouseY;
dropCanvas.addChild(newImag);
}
}
/**
* 获取图片信息
* */
privatefunction getBitmapData(target:DisplayObject):BitmapData
{
var res:BitmapData =new BitmapData(target.width, target.height);
res.draw(target);
return res;
}
]]>
</mx:Script>
<mx:Panel title="不同类型非列表移动和复制图片" width="90%" height="90%">
<mx:HBox width="100%" height="100%">
<mx:Canvas height="200" width="200" borderStyle="solid" backgroundColor="0xFFF6D5">
<mx:Image id="myimag" source="{che}" buttonMode="true"
mouseMove="mouseOverHandle(event)"
/>
</mx:Canvas>
<mx:Canvas height="200" width="200" borderStyle="solid" backgroundColor="0xFEFEF1"
dragDrop="dragDropHandle(event)"
dragEnter="dragEnterHandle(event)"
dragOver="dragOverHandle(event)"
/>
</mx:HBox>
</mx:Panel>
</mx:Application>
总结:在这个例子中是以图片为例的,其他拖动操作和这个类似,并且根据不同的需求,可以在dragdrop事件处理函数中做不同的操作。