Как сделать панель перетаскиваемой во Flex

Question

Я даю своим пользователям возможность создавать предметы. Диалоги создания элемента, такие как:

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

Как сделать панель перетаскиваемой, чтобы пользователи могли перемещать ее по странице, чтобы она не блокировала другие элементы

Answer 1

Вы можете попробовать:

Добавьте указатель мыши вниз и указатель событий вверх в заголовок панели и добавьте две функции:

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

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

"это" относится к панели.

Answer 2

Вот пример и код для перетаскиваемых (и изменяемых размеров) гибких панелей, хотя более старый SDK !!

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

Answer 3

На мой взгляд, самый простой способ сделать это - заменить s: Panel на as: TitleWindow.Обложка TitleWindow добавляет область к заголовку, позволяя ее перетаскивать, а класс TitleWindow имеет код для работы с перетаскиванием.Это позволит перетаскивать без необходимости кодировать какие-либо обработчики.Надеюсь, это поможет.

Answer 4

Вы можете добавить прослушиватель событий на панель, т. Е. В mousedown, сделать свойство startDrag панели истинным, а при mouseup (после mousedown) вы можете прекратить перетаскивание панели.

Это самый простой способ сделать это. Хотя это будет означать, что пользователь сможет перетаскивать панель, используя любую часть панели.

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'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