TabNavigator Update: Draggable Tabs

Of course I had to do this but this was much easier. Now you can drag the tabs to reorder them. Works pretty well. The one thing that seems lacking is instant notification where the new tab is going (on MouseMove), like FireFox brings up a purple arrow at the point where the tab is going. I dont know if I have the time for that, especially since it doesn’t seem like I will be using this container for my project, but the implementation should be simple.

Check the swf out here, and right click to view source.

If you are using this in a commercial app or something make sure you catch history management errors since removing tabs screws up history before that event (there isnt a tab-add undo when you click back ūüėČ ), and brings up the error stack trace if you are running the debug player.

Hope this helps someone :).

[Update]√ā¬†Responding to a query from someone, this code is released under the MIT license. You can download/fork the code from the GitHub Repository

Author: Arpit Mathur

Arpit Mathur is a Principal Engineer at Comcast Labs where he is currently working on a variety of topics including Machine Learning, Affective Computing, and Blockchain applications. Arpit has also worked extensively on Android and iOS applications, Virtual Reality apps as well as with web technologies like JavaScript, HTML and Ruby on Rails. He also spent a couple of years in the User Experience team as a Creative Technologist.

8 thoughts on “TabNavigator Update: Draggable Tabs”

  1. This helped me a ton!!! I was trying to figure out a way to provide a close button on each LinkButton in a LinkBar, and I only had to make a couple small changes from your code.

    This code made my day.


  2. hi, iam newbe to flex,

    the Custome tabNavigator is really good, an i have add another feature to it “Showing Tabs on Mouse Over”. Here is my code

    private function MouseOver(event:MouseEvent):void
    var index:int = getChildIndex(DisplayObject(event.currentTarget));
    super.selectedIndex = index;

    ifdo.addEventListener(MouseEvent.MOUSE_OVER, MouseOver); in createNavItem Block
    and still i have a problem to make this option Dynamic
    (ie: i like to pass bool value in mxml page where the component is called, if i say true the mouse over should work else it should not )
    i can able pass the value only to page by creating a public variable and not to page,

    is there any other idea to control the MouseOver Event? reply requsted

    thanks in adv.
    ravi prakash


  3. Hi Arpit,

    This is a genius work and it is useful in my project.

    However, I am trying to achieve a little bit different from what you have shown in your example. I am trying to drag a tab outside the application window for it to become a new window/container.

    Therefore like in your case, if a Tab is Dragged and Dropped outside the Panel container, then it should be opened as a new Panel with the content of that tab – just like how Mozzila firefox tabs work. Is this possible? Can you please help me with some suggestions.



Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

%d bloggers like this: