alekkus

Flex tutorial: Movable/Draggable window

My very first assignment as a Flex developer back in 2007 was to create a UI for a web-based instant messaging application. Since a user can open multiple chat windows, I needed to make those windows movable. After Googling I can’t find any hints, but after some trial and errors, I manage to get it worked.

Recently, someone was asking me about similar issue, so I though I’d post it here and share with anyone that need this.

Demo:
Movable Window (view source enabled)

Source Codes:

<?xml version="1.0" encoding="utf-8"?>
<mx:Application
	xmlns:mx="http://www.adobe.com/2006/mxml"
	layout="absolute"
	backgroundColor="#F8F8F8">

<mx:Script>
<![CDATA[
	import mx.core.UIComponent;

	private var _window : UIComponent;
	private var _originalPosition : Point;
	private var _mouseDownPosition : Point;

	private function onTitleBarMouseDown( event : MouseEvent ) : void
	{
		// 1. set _window
		_window = UIComponent( UIComponent( event.currentTarget ).parent );

		// 2. add mouse move and mouse up event listeners
		this.systemManager.addEventListener( MouseEvent.MOUSE_MOVE, doMoving, true );
		this.systemManager.addEventListener( MouseEvent.MOUSE_UP, doCommitMove, true );									

		// 3. save offsets
		_originalPosition = new Point( _window.x, _window.y );
		_mouseDownPosition = new Point( event.stageX, event.stageY );
	}

	private function doMoving( event : MouseEvent ) : void
	{
		// 1. prevent any other mouse up events to happen
		event.stopImmediatePropagation();

		// 2. calculate new position
		var positionToMove : Point = new Point( _originalPosition.x + ( event.stageX - _mouseDownPosition.x ),
								  		   		_originalPosition.y + ( event.stageY - _mouseDownPosition.y ) );
		// 3. move window
		_window.move( positionToMove.x, positionToMove.y );
	}

	private function doCommitMove( event : MouseEvent ) : void
	{
		// 1. prevent any other mouse up events to happen
		event.stopImmediatePropagation();	

		// 2. remove event listeners
		this.systemManager.removeEventListener( MouseEvent.MOUSE_MOVE, doMoving, true );
		this.systemManager.removeEventListener( MouseEvent.MOUSE_UP, doCommitMove , true );
	}
]]>
</mx:Script>

	<mx:Canvas
		x="37" y="31" width="245" height="156"
		borderColor="#999999" backgroundColor="#FFFFFF" borderStyle="solid" dropShadowEnabled="true" borderThickness="2">

		<!-- Title Bar-->
		<mx:Canvas
			x="0" y="0" width="100%" height="35"
			backgroundColor="#B1DAFA"
			mouseDown="onTitleBarMouseDown( event )">

			<mx:Label x="10" y="7" text="Title" fontSize="14"/>
		</mx:Canvas>

		<!-- Instruction -->
		<mx:Label x="27" y="73" text="Drag the title bar to move" fontSize="14"/>
	</mx:Canvas>
</mx:Application>

7 Comments »

1. Pearl says:
   December 10, 2009 at 04:12 pm

   Must thank you for the nice code block … Helped me alot…..

   Cheers

2. Alekkus says:
   December 10, 2009 at 08:12 pm

   You are welcome

3. Javier R.E. says:
   January 16, 2010 at 02:01 am

   great code. simple and useful

4. Divya Prakash says:
   February 12, 2010 at 03:02 pm

   Gr8….but I have a different requirement. I need windows (many) all on the same parent Window. Cn u help???

5. Divya Prakash says:
   February 12, 2010 at 03:02 pm

   To detail more:
   I want a parent window all the time and then wen i click a link on that page, a new smaller window shud cum up but the parent page shud be still clickable….to have more windows out of other links….plz guide….
   -thanks in advance

6. Jose Steven says:
   April 25, 2010 at 12:04 am

   Thanks for posting this article. Many info I got here.Keep writing

7. Jason Jakob says:
   May 29, 2010 at 01:05 pm

   I’m sorry but your example is a complicated terrible way to do it.

   Here is the best way:

   this.systemManager.addEventListener( MouseEvent.MOUSE_MOVE, doMoving, true );

   private function doMoving( event : MouseEvent ) : void {
   if(event.buttonDown)
   this.stage.nativeWindow.startMove();

   }

Leave a comment