Sorting tabs using the sortable interaction

When we implement tabs in a user interface, we might briefly consider the default ordering of the tabs. Obviously, we want the most relevant tabs accessible to the user in an order that makes most sense to them. But we seldom get this right in a way that makes everyone happy. So why not let the user arrange the tabs in a way that they see fit? Let's see if we can recruit the sortable interaction widget for some help by providing this capability in the tabs widget.

How to do it...

We'll use the following as the sample HTML driving our tabs instance:

<div id="tabs">
    <ul>
        <li><a href="#tab1">Tab 1</a></li>
        <li><a href="#tab2">Tab 2</a></li>
        <li><a href="#tab3">Tab 3</a></li>
    </ul>
    <div id="tab1">
        <p>Tab 1 content...</p>
    </div>
    <div id="tab2">
        <p>Tab 2 content...</p...