这里写四个实例:1,List->List 2,List->TileList 3,List->Canvas 4,Image->Text
通过这四个例子,我们实现一个从列表里拖拽图片,然后显示的例子。
准备:
先准备6张图片,三张是缩略图,三张是对应的大图。
开始
1,从list到list
要实现的目标就是:listA显示缩略图的路径,拖到listB之后显示大图的路径。
要点就是设置两个list的dropEnabled和dragEnabled属性为true.
Code
<?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>
<?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,也是可以控制的。
Code
<?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
<?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事件。
先把代码贴在这里:
Code
<?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
<?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里显示图片的路径。
要点:这是一个两个非增强型组件之间的相互拖拽,所以要写的代码多了些。用到的方法都已经在在上一篇上写到了。
Code
<?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>
<?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接收多个图片的效果。
拖放,就是这个样子了。