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

TabNavigator Update: Draggable Tabs

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. […] First, a few references. Here’s a TabNavigator with draggable tabs that was posted on a blog called code zen. I used this as my starting point (well, actually I started from scratch, then realized this was already out there). The customized TabNavigator component there is pretty good. So I grabbed that, cleaned up a bit of the re-ordering of tabs stuff, made a few other tweaks, and then added some functionality of my own. […]


  3. Ravi Prakash says:

    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


  4. […] TADAAAAA ! This post is the 100th blog post on my blog. Its been a fun ride so I figured I wrote a bit on the history of this blog as well as link to my favorite posts here. Part of the team at Flash Forward, Austin, 2006. The Fan 3.0 won the People’s Choice Award (which is voted for by people on the www and not a panel of judges). A lot has changed since then: The team has changed, Fan 4 is a 100% Flex app and I have longer hair . My first post here was on July 19, 2006. That said, this was my second attempt at blogging, the first attempt was something on blogger, where I posted my opinions on Flash, but I got bored of that real quick as I hardly got any traffic. I started Code Zen with the basic assumption that I will get no traffic at all. I basically wanted a place to keep all the code I worked on and get back to it months later. This was around the time Flex 2 was coming out of beta, and I needed a place to host FlexAmp, my entry to the Flex developer contest (FlexAmp was featured on for quite a while and is still featured on the community sample apps section on course once in a while the entries here would be purely opinion, like defending Flex when someone took cheap shots at it, but for the most part, I used this blog to document Flex techniques and gotchas or full blown components (list at the end of this). Some of the examples have even inspired greater work within the community. For example, SuperTabNavigator, one of the most used components on FlexLib, the open source Flex library that seems to be the one with the most traction right now was developed by Doug McCune on top example code on this blog (He of course packaged it into a complete component from the proof of concept I had here). […]


  5. FlexyK says:

    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 )

Twitter picture

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

Facebook photo

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

Google+ photo

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

Connecting to %s