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

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

父页：

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

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

PopUpManager.centerPopUp(myWin);

?

alertWindow.mxml:

<?xml version="1.0" encoding="utf-8"?>

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

?????<mx:Script>

???????<![CDATA[

????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; ???????????????????????

????????????????}

????????????

?????????}

???????]]>

????</mx:Script>

?

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

alertWindow.mxml:

<?xml version="1.0" encoding="utf-8"?>

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

?????<mx:Script>

???????<![CDATA[

????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:Script>

??????

????<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"/>

</mx:Canvas>

???

?

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