在flex4裡面的spark組件的panel是沒有內建拖動的功能的
因此若我們希望這物件要可以被拖動
我們必須要去自己實做當使用者拖動topGroup的區塊時的拖動動作
範例程式碼如下:
package components
{
import flash.events.MouseEvent;
import mx.managers.DragManager;
import spark.components.Group;
import spark.components.Panel;
/**
* A simple extension of the Spark Panel component
* that enables dragging.
*/
public class DraggablePanel extends Panel
{
//————————————–
// Constructor
//————————————–
public function DraggablePanel()
{
super();
}
//————————————–
// Skin Parts
//————————————–
/**
* The skin part that represents the title bar of the underlying Panel.
* NOTE: The default PanelSkin already has this, it’s just not defined as a skinPart in the Panel class.
* We want it so that we can capture dragging.
*/
[SkinPart(required=”true”)]
public var topGroup:Group;
//————————————–
// Overridden Methods
//————————————–
protected override function partAdded( partName:String, instance:Object ) : void
{
super.partAdded( partName, instance );
if (instance == topGroup)
{
Group( instance ).addEventListener( MouseEvent.MOUSE_DOWN, topGroup_mouseDownHandler );
Group( instance ).addEventListener( MouseEvent.MOUSE_UP, topGroup_mouseUpHandler );
}
}
protected override function partRemoved( partName:String, instance:Object ) : void
{
super.partRemoved( partName, instance );
if (instance == topGroup)
{
Group( instance ).removeEventListener( MouseEvent.MOUSE_DOWN, topGroup_mouseDownHandler );
Group( instance ).removeEventListener( MouseEvent.MOUSE_UP, topGroup_mouseUpHandler );
}
}
//————————————–
// Event Handlers
//————————————–
protected function topGroup_mouseDownHandler( event:MouseEvent ):void
{
if ( !DragManager.isDragging )
startDrag();
}
protected function topGroup_mouseUpHandler( event:MouseEvent ):void
{
stopDrag();
}
}
