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

“this”是指小组。

Answer 2

您可以向面板添加一个事件监听器，即在mousedown上，您可以使面板的startDrag属性为true，在mouseup上（在mousedown之后），您可以停止拖动面板。

这是最简单的方法。虽然这意味着用户可以使用面板的任何部分拖动面板。

Answer 3

在我看来，最简单的方法是用s：TitleWindow替换你的s：Panel。 TitleWindow皮肤在标题栏中添加了一个区域，允许它被拖动，TitleWindow类具有处理拖动的代码。这将允许拖动而无需编写任何处理程序。希望有所帮助。

Answer 4

以下是可拖动（和可调整大小）的Flex面板的示例和代码，旧的SDK虽然!!

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

alt text

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

如何在Flex中使面板可拖动

5 个答案: