Flex:使弹出的窗口使用Canvas可以拖拽

一般来讲，Flex中弹出窗口可用titleWindow和Panel来控制，直接即可执行拖拽动作。而有时我们希望弹出的窗口是自定义的Canvas，并且也使Canvas可以拖拽，那么该如何做呢？方法就是给Canvas加拖拽监听，参见如下代码：

父页：

//弹出窗口,alertWindow为一个弹出的Canvas

var myWin:alertWindow = alertWindow(PopUpManager.createPopUp(this, alertWindow, true));

PopUpManager.centerPopUp(myWin);

 

alertWindow.mxml:

 

<mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml" creationComplete="dragclick()" width="400" height="300" backgroundColor="#ffffff" backgroundAlpha="1">

     

      

    import mx.managers.PopUpManager;          

    import mx.controls.Alert;

 

    import flash.events.MouseEvent;

    import mx.containers.Canvas;

    import mx.core.Application;

    import mx.managers.PopUpManager;

    import flash.display.DisplayObject;

    import flash.events.Event;

   

   

    private var downXY:Point=new Point();

    private var upXY:Point=new Point();

      

        public function dragclick():void

         {          

             this.addEventListener(MouseEvent.MOUSE_UP,MouseEventFunc);     

             this.addEventListener(MouseEvent.MOUSE_DOWN,MouseEventFunc);

         }

        public function MouseEventFunc(evt:MouseEvent):void

        {

                switch (evt.type)

                {

                    case "mouseDown" :

                            downXY=new Point(mouseX,mouseY);                                              

                            evt.currentTarget.startDrag();                                                                         

                            break;

                    case "mouseUp" :

                            upXY=new Point(mouseX,mouseY);                                            

                            evt.currentTarget.stopDrag();                                                                    

                            break;

                    default:

                       break;                        

                }

            

         }

       ]]>

   

 

但此时问题又来了，拖动窗体任何一个地方，窗体都被拖动了；假如我想通过鼠标选中窗体中的某些文字，这时是无法选中的。解决方法是：不要将监听监听到整个窗体上，而应该在Canvas加一个头，拖动窗体头时才移动窗体。代码如下：

alertWindow.mxml:

 

<mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml" creationComplete="dragclick()" width="400" height="300" backgroundColor="#ffffff" backgroundAlpha="1">

     

      

    import mx.managers.PopUpManager;          

    import mx.controls.Alert;

    import flash.events.MouseEvent;

    import mx.containers.Canvas;

    import mx.core.Application;

    import mx.managers.PopUpManager;

    import flash.display.DisplayObject;

    import flash.events.Event;

   

   

    private var downXY:Point=new Point();

    private var upXY:Point=new Point();   

      

        public function dragclick():void

         {          

             labTitle.addEventListener(MouseEvent.MOUSE_UP,MouseEventFunc);     

             labTitle.addEventListener(MouseEvent.MOUSE_DOWN,MouseEventFunc);

         }

        public function MouseEventFunc(evt:MouseEvent):void

        {

              var cav:Canvas = evt.currentTarget.parent as Canvas;

                switch (evt.type)

                {

                    case "mouseDown" :

                            downXY=new Point(mouseX,mouseY);                                              

                            cav.startDrag();                                                                         

                            break;

                    case "mouseUp" :

                            upXY=new Point(mouseX,mouseY);                                            

                            cav.stopDrag();                                                                    

                            break;

                    default:

                       break;                        

                }

            

         }

       ]]>

   

      

    <mx:Button id="_closeBtn" toolTip="关闭" click="PopUpManager.removePopUp(this);" height="20" label="¡Á" width="35" x="366" y="0"/> 

    <mx:Label x="0" y="0" id="labTitle" width="365" height="20"/>

 

   

 

试试，这时仅仅拖动labTitle区域才可以拖动。