How to make a panel draggable in Flex

Question

I give my users the ability to create elements. Dialogs Create item, for example:

    <s:Panel id="postitNoteCreatePanel" 
             horizontalCenter="0" verticalCenter="0"
             ...

How to make the panel draggable so that users can move it around the page so that it does not block other elements.

Answer 1

You can try:

Add the mouse down and hover over the title bar of the panel and add two functions:

    private function handleDown(event:MouseEvent):void{
        this.startDrag();
    }

    private function handleUp(event:MouseEvent):void{
        this.stopDrag();
    }

"this" refers to the panel.

Answer 2

You can add an event listener to the panel, that is, to mousedown, you can set the startDrag property of the panel to true, and to mouseup (after mousedown) you can stop dragging the panel.

. , .

Answer 3

, , - s: Panel s: TitleWindow. TitleWindow , , TitleWindow . . , .

Answer 4

( ) , SDK, !!

http://blogs.adobe.com/flexdoc/2007/03/creating_resizable_and_draggab.html

Answer 5

. flex 4.5. .

http://code.google.com/p/force-explorer/source/browse/trunk/Flex/Explorer/src/components/DraggablePanel.as?r=8

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 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();
                }
        }
}

---

http://code.google.com/p/force-explorer/source/browse/trunk/Flex/Explorer/src/components/DraggablePanel.as?r=8