How to create draggable panel without title in Flex? - apache-flex

Question

I want to drag my panel without title when I drag any part of it. I already know how to remove title from panel and I know how to drag it with title bar. But i don't know how to drag without title.. Please help.

Answer 1

Here is my example
//Application
<?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>

Answer 2

How are you starting the drag using the title bar? Do you have a mouseDown listener on the titlebar section of the Panel? You can just move the mouseDown listener to the Panel itself.