AS3探究

Air拖拽操作之拖入拖出

最近在做一款AIR的播放器，在做到播放列表部分，就想到用AIR的拖拽操作，特意关注了一下Air拖拽操作的一些文章。 //———————文字描述不擅长，以下借用RIAMeeting的一篇文章的部分描述———————— 我们可以把整个拖拽的过程分为三个阶段：启动，拖动和放下。

  1. 启动：用户通过按住鼠标按键从组件或组件中的项目进行拖动，启动拖放操作。涉及的事件包括nativeDragStart 和nativeDragComplete。启动方式是调取NativeDragManager.doDrag()，这个方法调取后，会启动拖拽的过程。
  2. 拖动：用户在按住鼠标按键的同时，将鼠标光标移至其他组件、应用程序，或移至桌面。涉及的事件包括nativeDragUpdate，nativeDragEnter，nativeDragOver，nativeDragExit。其中nativeDragEnter事件会被我们用于检测数据格式，以决定是否允许接受该数据格式。如果格式合法，我们可以调用NativeDragManager.acceptDragDrop()方法，允许该数据在组件上放下。这个时候屏幕上光标的形状会有所变化。
  3. 放下：用户在符合条件的放置目标上释放鼠标。如果是在AIR应用内部放下，涉及的事件包括nativeDragDrop，我们可以捕获这个事件，来获取剪切板中的数据，如果放下的区域在AIR外部，那么将会由操作系统来确定如何处理该操作。

下图描述了NativeDragEvent的各种类型，不同颜色代表这是由不同的对象调度的。 AIR还提供了一个ClipboardFormats类，定义了各种不同的剪切板描述格式，参见下图(这是AIR1.5的版本，在AIR2中增加了一个新的格式，稍后叙述)： 按照数据的来源和去处，我们可以将拖拽分为两种类别：拖出和拖入。 //———————  End    ———————— 借用部分AIRMeeting的图片，AIR的拖拽还是侦听好几个事件就可以了如nativeDragEnter，nativeDragOver等，感觉事件还是有点少，不太够用。 下面是我做的一个小实例，不多少，直接上图，上代码！ 实例的效果是 ，拖拽一张jpg或png位图到AIR上，Air会自动显示该图片，同时将桌面上的图片删除至垃圾桶，然后再从AIR上拖出该图片，该图片就会重新生成在桌面上。 局部DragIn类的代码： [codesyntax lang=”actionscript3”]

private function onDragIn(event:NativeDragEvent):void{
var transferable:Clipboard = event.clipboard;
if(transferable.hasFormat(ClipboardFormats.FILE_LIST_FORMAT)){
var files:Array = transferable.getData(ClipboardFormats.FILE_LIST_FORMAT) as Array;
for each(var file:File in files){
if(file.extension ==”jpg” file.extension ==”png” ){
NativeDragManager.acceptDragDrop(sp);
break;
}
}
} else {
trace(“格式不对，仅接受jpg”);
}
}
public var file:File;
private function onDrop(event:NativeDragEvent):void{
var dropfiles:Array= event.clipboard.getData(ClipboardFormats.FILE_LIST_FORMAT) as Array;
file = dropfiles[0];
trace(file.url);
var loader:Loader = new Loader();
loader.contentLoaderInfo.addEventListener(Event.COMPLETE,picComHandler);
loader.load(new URLRequest(file.url));
}
private function picComHandler(e:Event):void{
var img:Bitmap = (e.currentTarget as LoaderInfo).content as Bitmap;
sp.addChild(img);
file.moveToTrash();
removeListener();
DragOut.getInstance().addListener();
}

[/codesyntax] 局部DragOut代码： [codesyntax lang=”actionscript3”]

private function downHandler(e:MouseEvent):void{
var bmp:Bitmap = sp.getChildAt(0) as Bitmap;
var jpg:JPEGEncoder = new JPEGEncoder();
ba = jpg.encode(bmp.bitmapData);
file = DragIn.getInstance().file;
var transferObject:Clipboard = createClipboard(bmp);
NativeDragManager.doDrag(sp, transferObject, bmp.bitmapData, new Point(-mouseX,-mouseY));
sp.addEventListener(NativeDragEvent.NATIVE_DRAG_START,startHandler);
sp.addEventListener(NativeDragEvent.NATIVE_DRAG_COMPLETE,comHandler);
}
private function startHandler(e:NativeDragEvent):void{
trace(“开始拖拽”);
}
private var file:File;
/**
*拖拽完成
* @param e
*
*/
private function comHandler(e:NativeDragEvent):void{

var fileStream:FileStream = new FileStream();
fileStream.open(file, FileMode.WRITE);
fileStream.writeBytes(ba,0,ba.length);
fileStream.close();

sp.removeChildAt(0);
sp.removeEventListener(MouseEvent.MOUSE_DOWN,downHandler);
DragIn.getInstance().init();
}
public function createClipboard(image:Bitmap):Clipboard {
var transfer:Clipboard = new Clipboard();
transfer.setData(“bitmap”, image, true);
transfer.setData(ClipboardFormats.BITMAP_FORMAT, image.bitmapData, false);
transfer.setData(ClipboardFormats.FILE_LIST_FORMAT,new Array(file),false);
return transfer;
}

[/codesyntax] 源码下载：[download id=”11” format=”1”] 本次实例的代码写的有点混乱，看不懂的留言哈，重点代码已经列出！这个拖拽的功能应用很广，比如做列表的动态管理，做文件上传等等凡是涉及到文件列表方面的貌似都可以用，期待你的作品哈！ 扩展阅读：http://www.riameeting.com/node/486/