flex3:dragdrop全攻略（二）

前一篇文章是理论，这篇开始实践……

这里写四个实例：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接收多个图片的效果。

拖放，就是这个样子了。