Simple Draggable Panel Flex 3.5

So I thought to post a simple way to make a draggable panel, actually this can be implemented in every container component. You just create a custom component of the container of your choise and place the following code, then you can simply reference your component (named MovingPanel for example) as:
<local:MovingPanel width=”400″ height=”200″/>

<?xml version=”1.0″ encoding=”utf-8″?>
<mx:Panel xmlns:mx=”http://www.adobe.com/2006/mxml” layout=”absolute” width=”400″ height=”300″ creationComplete=”initDrag(event)” dropShadowEnabled=”false” alpha=”1.0″ backgroundAlpha=”1.0″ backgroundColor=”#FFFFFF” borderAlpha=”1.0″>
<mx:Script>
<![CDATA[

import flash.events.*;
import flash.filters.*;

var clickX, clickY;
public var f:DropShadowFilter = new DropShadowFilter(5,90,0×000000,.70,9,9);
public var myFilters:Array = new Array();
var dragger;

public function initDrag(e)
{
dragger = this.titleBar;
dragger.addEventListener(MouseEvent.MOUSE_DOWN,beginDraging);
}
public function beginDrag(e)
{
clickX = e.localX;
clickY = e.localY;
myFilters.push(f);
dragger.removeEventListener(MouseEvent.MOUSE_DOWN,beginDraging)
stage.addEventListener(MouseEvent.MOUSE_MOVE, dragIt);
stage.addEventListener(MouseEvent.MOUSE_UP, endDraging);
this.filters = myFilters;

moveToTop();
}

public function dragIt(e)
{
this.x = e.stageX-clickX;
this.y = e.stageY-clickY;
}

public function endDraging(e)
{
this.filters.pop();
this.filters = null;
stage.removeEventListener(MouseEvent.MOUSE_MOVE, dragIt);
stage.removeEventListener(MouseEvent.MOUSE_UP, endDrag);
dragger.addEventListener(MouseEvent.MOUSE_DOWN,beginDraging);

// super.shadowDistance = 0;
}

function moveToTop(e=null)
{
parentDocument.setChildIndex(this, stage.numChildren);
}

]]>
</mx:Script>

</mx:Panel>