flex DragManager

DragManager 类管理拖放操作，您可以使用它来将数据从 Flex 应用程序中的一个位置移动到另一位置。例如，您可以选择一个对象（如 List 控件中的项目）或一个 Flex 控件（如 Image 控件），然后将其拖至另一个组件进行添加。

1.DragManager.showFeedback(feedback:String):void参数feedback可选值
DragManager.COPY 在拖动鼠标，并按下Crtl键时显示一个带有一个白色加号的绿色圆圈表示可以放置

DragManager.LINK 在拖动鼠标，并按下shift键时出现一个带有白色箭头的圆圈
DragManager.MOVE 仅一个箭头表示当前可以拖放
DragManager.NONE表示不能放置的图标
1.简单的demo

<?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.Alert;
        	import mx.controls.Label;   
            import mx.core.IUIComponent;   
            import mx.containers.Box;   
            import mx.containers.Canvas;   
            import mx.events.DragEvent;   
            import mx.managers.DragManager;   
            import mx.core.DragSource;   
            import mx.core.UIComponent;   
            private static const FORMAT:String = "box";   
  
            private function boxMouseDownHandler(evt:MouseEvent):void{   
                var iu:Box = evt.currentTarget as Box;   
                var dragSource:DragSource = new DragSource();   
                dragSource.addData( iu, FORMAT );   
//                lbl.setStyle("backgroundColor","red");
                DragManager.doDrag( iu, dragSource, evt );   
            }   
               
            private function canvasDragEnterHandler(evt:DragEvent):void{   
                if(evt.dragSource.hasFormat(FORMAT)){   
                    DragManager.acceptDragDrop(Canvas(evt.currentTarget));   
                }   
            }   
               
            private function canvasDragHandler(evt:DragEvent):void{   
                var box:Box = Box(evt.dragInitiator);   
                box.x = evt.localX;   
                box.y = evt.localY;   
            }   

        ]]>   
    </mx:Script>   
       
    <mx:Canvas backgroundColor="0xEEEEEE" width="652"  verticalScrollPolicy="off" horizontalScrollPolicy="off" height="320" horizontalCenter="0" verticalCenter="0" dragEnter="canvasDragEnterHandler(event)"  dragDrop="canvasDragHandler(event)">   
        <mx:Box id="box"  width="54" height="66"  x="80" y="79" mouseDown="boxMouseDownHandler(event)" focusEnabled="true" >
        	        <mx:Image source="file.png" width="41" height="36" x="111" y="121"/>
        </mx:Box>   

    </mx:Canvas>   
</mx:Application> 

 

2.拖拽显示拖拽对象的缩略图，遗憾的是DragManager 对拖拽区域控制的不是很好，

效果图：

 

<?xml version="1.0"?>
<!-- dragdrop\DandDImageProxy.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">

    <mx:Script>
        <![CDATA[
            //Import classes so you don't have to use full names.
            import mx.managers.DragManager;
            import mx.core.DragSource;
            import mx.events.DragEvent;
            import flash.events.MouseEvent;

            [Embed(source='1.png')]
            public var globeImage:Class;

            private function mouseOverHandler(event:MouseEvent):void 
            {                
                var dragInitiator:Image=Image(event.currentTarget);
                var ds:DragSource = new DragSource();
                ds.addData(dragInitiator, "img");               
                var imageProxy:Image = new Image();
                imageProxy.source = globeImage;
                imageProxy.height=60;
                imageProxy.width=40;                
                DragManager.doDrag(dragInitiator, ds, event, 
                    imageProxy, -15, -15, 1.00);
            }
            private function dragEnterHandler(event:DragEvent):void {
                if (event.dragSource.hasFormat("img"))
                {
                    DragManager.acceptDragDrop(Canvas(event.currentTarget));
                }
            }

            private function dragDropHandler(event:DragEvent):void {
                Image(event.dragInitiator).x = 
                    Canvas(event.currentTarget).mouseX;
                Image(event.dragInitiator).y = 
                    Canvas(event.currentTarget).mouseY;
            }
        ]]>
    </mx:Script>
    
    <!-- The Canvas is the drag target --> 
    <mx:Canvas id="v1" 
        width="500" height="500"  
        borderStyle="solid" 
        backgroundColor="#DDDDDD"
        dragEnter="dragEnterHandler(event);" 
        horizontalScrollPolicy="off"
        verticalScrollPolicy="off"
        dragDrop="dragDropHandler(event);">
        
        <!-- The image is the drag initiator. -->
        <mx:Image id="myimg" 
            source="@Embed(source='1.png')" 
            mouseMove="mouseOverHandler(event);"/> 
    </mx:Canvas>
</mx:Application>

 

3.拖拽显示拖拽对象的缩略图，控制拖拽区域:

<?xml version="1.0"?>
<!-- dragdrop\DandDImageProxy.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">

    <mx:Script>
        <![CDATA[
            //Import classes so you don't have to use full names.
            import mx.managers.DragManager;
            import mx.core.DragSource;
            import mx.events.DragEvent;
            import flash.events.MouseEvent;

            [Embed(source='1.png')]
            public var globeImage:Class;

            private function mouseOverHandler(event:MouseEvent):void 
            {                
                var dragInitiator:Image=Image(event.currentTarget);
                var ds:DragSource = new DragSource();
                ds.addData(dragInitiator, "img");               
                var imageProxy:Image = new Image();
                imageProxy.source = globeImage;
                imageProxy.height=60;
                imageProxy.width=40;                
                DragManager.doDrag(dragInitiator, ds, event, 
                    imageProxy, -15, -15, 1.00);
            }
            private function dragEnterHandler(event:DragEvent):void {
                if (event.dragSource.hasFormat("img"))
                {
                    DragManager.acceptDragDrop(Canvas(event.currentTarget));
                }
            }

            private function dragDropHandler(event:DragEvent):void {
                Image(event.dragInitiator).x = 
                    Canvas(event.currentTarget).mouseX;
                Image(event.dragInitiator).y = 
                    Canvas(event.currentTarget).mouseY;
                    if(Image(event.dragInitiator).x <0)
                    {
                    	Image(event.dragInitiator).x =0;
                    }
                    if(Image(event.dragInitiator).x >v1.width-Image(event.dragInitiator).width)
                    {
                    	Image(event.dragInitiator).x =v1.width-Image(event.dragInitiator).width;
                    }
                    if(Image(event.dragInitiator).y<0)
                    {
                    	Image(event.dragInitiator).y=0;
                    }
                    if(Image(event.dragInitiator).y>v1.height-Image(event.dragInitiator).height)
                    {
                    	Image(event.dragInitiator).y=v1.height-Image(event.dragInitiator).height;
                    }
            }
        ]]>
    </mx:Script>
    
    <!-- The Canvas is the drag target --> 
    <mx:Canvas id="v1" 
        width="500" height="500"  
        borderStyle="solid" 
        backgroundColor="#DDDDDD"
        dragEnter="dragEnterHandler(event);" 
        horizontalScrollPolicy="off"
        verticalScrollPolicy="off"
        dragDrop="dragDropHandler(event);">
        
        <!-- The image is the drag initiator. -->
        <mx:Image id="myimg" 
            source="@Embed(source='1.png')" 
            mouseMove="mouseOverHandler(event);"/> 
    </mx:Canvas>
</mx:Application>

 

 

 

附件（dNdLib.swc.zip ）为google code 上的拖拽包