如何在Flex中创建没有标题的可拖动面板?

时间:2013-04-15 14:29:33

标签: flex draggable panel

当我拖动它的任何部分时,我想拖动我的面板没有标题。我已经知道如何从面板中删除标题,我知道如何用标题栏拖动它。但是我不知道如何拖动没有标题..请帮忙。

2 个答案:

答案 0 :(得分:1)

这是my example

//应用

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
           xmlns:s="library://ns.adobe.com/flex/spark" 
           xmlns:mx="library://ns.adobe.com/flex/mx" 
           minWidth="955" minHeight="600" creationComplete="init(event)">
<fx:Script>
    <![CDATA[
        import com.dragpanel.MyPanel;

        import mx.events.FlexEvent;

        protected function init(event:FlexEvent):void
        {
            var panel:MyPanel = new MyPanel();
            panel.width = 300;
            panel.height = 200;
            panel.title = "Hello";

            this.addElement(panel);
        }

    ]]>
</fx:Script>

</s:Application>

// MyPanel.mxml

<?xml version="1.0" encoding="utf-8"?>
<s:Panel xmlns:fx="http://ns.adobe.com/mxml/2009" 
     xmlns:s="library://ns.adobe.com/flex/spark" 
     xmlns:mx="library://ns.adobe.com/flex/mx" 
     width="150" height="80" title="Hello" 
     mouseDown="onMouseDown(event)" mouseUp="onMouseUp(event)" 
     skinClass="com.dragpanel.PanelNoTitleBar">

<fx:Script>
    <![CDATA[
        protected function onMouseDown(event:MouseEvent):void
        {
            this.startDrag();
        }

        protected function onMouseUp(event:MouseEvent):void
        {
            this.stopDrag();
        }

    ]]>
</fx:Script>

<s:HGroup verticalAlign="bottom" x="10" y="10">
    <s:Label text="Name:"/>
    <s:TextInput width="60"/>
</s:HGroup>
</s:Panel>

答案 1 :(得分:0)

你是如何使用标题栏开始拖动的?您是否在Panel的标题栏部分有一个mouseDown监听器?您只需将mouseDown侦听器移动到Panel本身即可。