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.
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
<mx:Script>
<![CDATA[
import mx.collections.ArrayCollection;
[Bindable]
private var imageInfo:ArrayCollection=new ArrayCollection([
{name:"beauty1",sPath:"assets/myBt1.jpg",bPath:"assets/bt1.jpg"},
{name:"beauty2",sPath:"assets/myBt2.jpg",bPath:"assets/bt2.jpg"},
{name:"beauty3",sPath:"assets/myBt3.jpg",bPath:"assets/bt3.jpg"}
]);
]]>
</mx:Script>
<mx:List dataProvider="{imageInfo}" x="10" y="10" labelField="sPath" dragEnabled="true"/>
<mx:List x="150" y="10" labelField="bPath" dropEnabled="true"/>
</mx:Application>
这个应该很简单吧，任何继承了ListBase的组件都有dragEnabled和dropEnabled属性。
2,从list到TileList
实现的目标：从左侧的list里面的图片列表里选择一张图片拖拽到右侧的TileList。
要点：用到了itemRenderer的知识，前面我也写过这个。其余的应该与上面的一样，list和tileList都是直接能拖动的组件，把list的一项拖动到tileList的本质就是把list的数据的一项保存到tileList的dataProvider里面。原来的list的那项是被复制到TileList里还是剪切到TileList，也是可以控制的。
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
<mx:Script>
<![CDATA[
import mx.collections.ArrayCollection;
[Bindable]
private var imageInfo:ArrayCollection=new ArrayCollection([
{name:"beauty1",sPath:"assets/myBt1.jpg",bPath:"assets/bt1.jpg"},
{name:"beauty2",sPath:"assets/myBt2.jpg",bPath:"assets/bt2.jpg"},
{name:"beauty3",sPath:"assets/myBt3.jpg",bPath:"assets/bt3.jpg"}
]);
]]>
</mx:Script>
<mx:List dataProvider="{imageInfo}" x="10" y="10" labelField="sPath" dragEnabled="true"/>
<!--<mx:TileList dropEnabled="true" x="140" y="10" labelField="bPath">
<mx:itemRenderer>
<mx:Component>
<mx:Image source="{data.bPath}" width="300" height="400"/>
</mx:Component>
</mx:itemRenderer>
</mx:TileList>-->
<mx:DataGrid x="140" y="10" dropEnabled="true">
<mx:columns>
<mx:DataGridColumn dataField="name"/>
<mx:DataGridColumn dataField="sPath"/>
<mx:DataGridColumn dataField="bPath"/>
</mx:columns>
</mx:DataGrid>
</mx:Application
3，从list到canvas
实现的目标：从左侧的list里的图片类表里选择一项拖拽到右侧的canvas。
要点：canvas是非增强型的组件，所以拖拽过程中有些事件处理要自己写。写的主要是dragEnter事件，dragDrop事件。
先把代码贴在这里：
<?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.Image;
import mx.events.DragEvent;
import mx.collections.ArrayCollection;
import mx.managers.DragManager;
import mx.core.IUIComponent;
[Bindable]
private var imageInfo:ArrayCollection=new ArrayCollection([
{name:"beauty1",sPath:"assets/myBt1.jpg",bPath:"assets/bt1.jpg"},
{name:"beauty2",sPath:"assets/myBt2.jpg",bPath:"assets/bt2.jpg"},
{name:"beauty3",sPath:"assets/myBt3.jpg",bPath:"assets/bt3.jpg"}
]);
private function onDragEnter(event:DragEvent):void{
if(event.dragSource.hasFormat('items'))
DragManager.acceptDragDrop(IUIComponent(event.target));
else
trace("非相关类型");
}
private function doDragDrop(event:DragEvent):void{
var source: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;
}
]]>
</mx:Script>
<mx:List dataProvider="{imageInfo}" x="10" y="10" dragEnabled="true" width="55" height="250">
<mx:itemRenderer>
<mx:Component>
<mx:Image source="{data.sPath}" width="50" height="70"/>
</mx:Component>
</mx:itemRenderer>
</mx:List>
<mx:Canvas id="displayArea" width="900" height="700" x="150" y="10" backgroundColor="#ffffff"
dragEnter="onDragEnter(event)" dragDrop="doDragDrop(event)">
</mx:Canvas>
</mx:Application
先是dragEnter事件，在这里我们判断了一下dragSource的数据格式是不是items，如果是就接受这个拖放，否则返回。我看很多代码里都有这个判断，但是我认为是没什么必要的，因为在这种情况下dragSource的数据格式一定是items的。只有当面临着多个dragSource的时候这个判断才有意义，是items格式的就要，否则就不要。但是DragManager.acceptDragDrop(IUIComponent(event.target))是一定要有的。
哦，对了，这个items是哪里来的？预先定义好的，list的拖拽源的数据格式就是items的，tree是treeItems，其他的不知道了，想知道的话去sdk里去找。
这个dragDrop事件，在这个函数里，主要的做的就是取得dragSource的数据，然后处理这个数据。很重要的一点是，从list取得的数据是Array格式的。要想判断这个格式，有个小技巧，就是加上断点进行调试，在调试面板里就能找到这个dragSource的数据类型。
好了，现在从左面列表（list）里面拖拽一张美女图片的缩略图，然后拽到右边，就可以看到大图了。
4，image->Text
要实现的最后一个目标就是：将canvas里的image拖拽到text,在text里显示图片的路径。
要点：这是一个两个非增强型组件之间的相互拖拽，所以要写的代码多了些。用到的方法都已经在在上一篇上写到了。
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
<mx:Script>
<![CDATA[
import mx.core.DragSource;
import mx.controls.Image;
import mx.events.DragEvent;
import mx.controls.Text;
import mx.collections.ArrayCollection;
import mx.managers.DragManager;
import mx.core.IUIComponent;
[Bindable]
private var imageInfo:ArrayCollection=new ArrayCollection([
{name:"beauty1",sPath:"assets/myBt1.jpg",bPath:"assets/bt1.jpg"},
{name:"beauty2",sPath:"assets/myBt2.jpg",bPath:"assets/bt2.jpg"},
{name:"beauty3",sPath:"assets/myBt3.jpg",bPath:"assets/bt3.jpg"}
]);
private function onDragEnter(event:DragEvent):void{
if(event.dragSource.hasFormat('items'))
DragManager.acceptDragDrop(IUIComponent(event.target));
else
trace("非相关类型");
}
private function doDragDrop(event:DragEvent):void{
var 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,'img');
var proxy:Image=event.currentTarget as Image;
DragManager.doDrag(dragInitiator,myDragSource,event,proxy);
}
private function dragEnterHandler(event:DragEvent):void{
if(event.dragSource.hasFormat('img')){
DragManager.acceptDragDrop(IUIComponent(event.target 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;
}
]]>
</mx:Script>
<mx:List dataProvider="{imageInfo}" x="10" y="10" dragEnabled="true" width="55" height="250">
<mx:itemRenderer>
<mx:Component>
<mx:Image source="{data.sPath}" width="50" height="70" />
</mx:Component>
</mx:itemRenderer>
</mx:List>
<mx:Canvas id="displayArea" width="900" height="700" x="150" y="10" backgroundColor="#ffffff"
dragEnter="onDragEnter(event)" dragDrop="doDragDrop(event)">
<!--<mx:Image width="300" height="400" id="img"/>-->
</mx:Canvas>
<mx:Text id="fav" x="1100" y="10" width="100" height="100" text="path" fontSize="18"
dragEnter="dragEnterHandler(event)" dragOver="dragOverHandler(event)" dragDrop="dragDropHandler(event)"/>
</mx:Application>
这个与第三个例子相比较，除了多了imga到text的拖拽外，还增加了canvas接收多个图片的效果。
拖放，就是这个样子了。