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>






thanks a lot..:-)