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,0x000000,.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>