How to make panel draggable in Flex

I give my users the ability to create items.开发者_JAVA百科 The Create item dialogs such as:

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

How can I make panel draggable so that users can move it around the page so it doesn't block other items

---

You may try:

Add mouse down and mouse up eventlistner to the titleBar of the panel, and add two functions:

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

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

"this" is refer the the panel.

---

You can add an event listener to the panel, i.e on mousedown, you can make the startDrag property of the panel true, and on mouseup (after mousedown) , you can stop dragging the panel.

This is the easiest way to do this.Though this would mean the user will be able to drag the panel using any part of the panel.

---

The easiest way to do this in my opinion is to substitute your s:Panel with a s:TitleWindow. The TitleWindow skin adds an area to the titlebar allowing it to be dragged and the TitleWindow class has code to deal with dragging. This will allow dragging without you having to code any handlers. Hope that helps.

---

Here is example and code for draggable (and resizable) flex Panels, older SDK though!!

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

---

code blew can help you. I use this code in flex 4.5. It works perfectly.

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

---

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