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>

Greetings!

Hi there.

I’m a Flex developer specializing in the social media spaces. I have been working with Flex for about two years now, learn alot from many bloggers out there who were kind enough to show their knowledge. So I thought it’s time that I contribute my share. This blog will be dedicated to the emerging technologies of the Adobe Flash Platform, namely Flex. I hope this blog will be value-added for new flex developers as well as the social media enthusiasts.

Cheers
Alex Goh