flex3:drag-drop全攻略(二)

　　这里写四个实例：1,List->List    2,List->TileList  3,List->Canvas  4,Image->Text
　　通过这四个例子，我们实现一个从列表里拖拽图片，然后显示的例子。
　　准备：
　　先准备6张图片，三张是缩略图，三张是对应的大图。
　　开始
　　1，从list到list
　　要实现的目标就是:listA显示缩略图的路径，拖到listB之后显示大图的路径。
　　要点就是设置两个list的dropEnabled和dragEnabled属性为true.
　　   
　　   
　　   
　　   
　　   
　　   
　　   
　　  
　　                                       
　　这个应该很简单吧，任何继承了ListBase的组件都有dragEnabled和dropEnabled属性。
　　2,从list到TileList
　　实现的目标：从左侧的list里面的图片列表里选择一张图片拖拽到右侧的TileList。
　　要点：用到了itemRenderer的知识，前面我也写过这个。其余的应该与上面的一样，list和tileList都是直接能拖动的组件，把list的一项拖动到tileList的本质就是把list的数据的一项保存到tileList的dataProvider里面。原来的list的那项是被复制到TileList里还是剪切到TileList，也是可以控制的。
　　   
　　   
　　   
　　   
　　   
　　   
　　   
　　   
　　   
　　   
　　   
　　   
　　-->   
　　   
　　   
　　   
　　   
　　   
　　   
　　   
　　                                                                                                     -->                                                                       
　　   
　　   
　　Array=event.dragSource.dataForFormat('items') as Array;   
　　displayArea.removeAllChildren();   
　　var img:Image=new Image();   
　　img.source=source[0].bPath;   
　　displayArea.addChild(img);   
　　img.x=0;   
　　img.y=0;   
　　img.width=500;   
　　img.height=700;   
　　}   
　　]]>   
　　   
　　   
　　   
　　   
　　   
　　   
　　   
　　   
　　   
　　   
　　       Array=event.dragSource.dataForFormat('items ') as Array;                 displayArea.removeAllChildren();                 var img:Image=new Image();                 img.source=source[0].bPath;                 displayArea.addChild(img);                 img.x=0;                 img.y=0;                 img.width=500;                 img.height=700;             }         ]]>                                                                                                 Array格式的。要想判断这个格式，有个小技巧，就是加上断点进行调试，在调试面板里就能找到这个dragSource的数据类型。
　　好了，现在从左面列表（list）里面拖拽一张美女图片的缩略图，然后拽到右边，就可以看到大图了。
　　4，image->Text
　　要实现的最后一个目标就是：将canvas里的image拖拽到text,在text里显示图片的路径。
　　要点：这是一个两个非增强型组件之间的相互拖拽，所以要写的代码多了些。用到的方法都已经在在上一篇上写到了。
　　   
　　   
　　   
　　Array=event.dragSource.dataForFormat('items') as Array;   
　　var img:Image=new Image();   
　　img.source=source[0].bPath;   
　　displayArea.addChild(img);   
　　img.x=event.localX;   
　　img.y=event.localY;   
　　img.width=200;   
　　img.height=300;   
　　img.addEventListener(MouseEvent.MOUSE_MOVE,dragIt) ;   
　　}   
　　//处理图片的拖拽   
　　private function dragIt(event:MouseEvent):void{   
　　var dragInitiator:Image=event.currentTarget as Image;   
　　var myDragSource:DragSource=new DragSource();   
　　myDragSource.addData(event.currentTarget.source,'img');   
　　var proxy:Image=event.currentTarget as Image;   
　　DragManager.doDrag(dragInitiator,myDragSource,even t,proxy);   
　　}   
　　private function dragEnterHandler(event:DragEvent):void{   
　　if(event.dragSource.hasFormat('img')){   
　　DragManager.acceptDragDrop(IUIComponent(event.targ et as Text));   
　　}   
　　else{   
　　return;   
　　}   
　　}   
　　private function dragOverHandler(event:DragEvent):void{   
　　//为了实现剪切的效果   
　　DragManager.showFeedback(DragManager.MOVE);   
　　}   
　　private function dragDropHandler(event:DragEvent):void{   
　　var source:String=event.dragSource.dataForFormat('img') as String;   
　　fav.text=source;   
　　}   
　　]]>   
　　   
　　   
　　   
　　   
　　   
　　   
　　   
　　   
　　   
　　-->   
　　   
　　   
　　  
　　       Array=event.dragSource.dataForFormat('items ') as Array;                 var img:Image=new Image();                 img.source=source[0].bPath;                 displayArea.addChild(img);                 img.x=event.localX;                 img.y=event.localY;                 img.width=200;                 img.height=300;                 img.addEventListener(MouseEvent.MOUSE_MOVE,dragIt) ;             }                          //处理图片的拖拽             private function dragIt(event:MouseEvent):void{                 var dragInitiator:Image=event.currentTarget as Image;                 var myDragSource:DragSource=new DragSource();                 myDragSource.addData(event.currentTarget.source,'i mg');                 var proxy:Image=event.currentTarget as Image;                 DragManager.doDrag(dragInitiator,myDragSource,even t,proxy);             }                          private function dragEnterHandler(event:DragEvent):void{                 if(event.dragSource.hasFormat('img')){                     DragManager.acceptDragDrop(IUIComponent(event.targ et as Text));                 }                 else{                     return;                 }             }                          private function dragOverHandler(event:DragEvent):void{                 //为了实现剪切的效果                 DragManager.showFeedback(DragManager.MOVE);             }                          private function dragDropHandler(event:DragEvent):void{                 var source:String=event.dragSource.dataForFormat('img' ) as String;                  fav.text=source;             }                                   ]]>                                                                                           -->              
　　这个与第三个例子相比较，除了多了imga到text的拖拽外，还增加了canvas接收多个图片的效果。
　　拖放，就是这个样子了。