JSFiddle - React, Tailwind, and code Playground
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Sort & Save ordering of JqueryUI Tab: An hack</title>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.17/themes/base/jquery-ui.css">
</head>
<body>
<div id="tabs">
<ul>
<li id="li-1"><a id="a-1" href="#tabs-1">Nunc tincidunt (a-1)</a></li>
<li id="li-3"><a id="a-3" href="#tabs-3">Aenean lacinia (a-3)</a></li>
<li id="li-2"><a id="a-2" href="#tabs-2">Proin dolor (a-2)</a></li>
</ul>
<div id="tabs-1">
<p>Lorem Ipsum</p>
</div>
<div id="tabs-2">
<p>Dolor Sit</p>
</div>
<div id="tabs-3">
<p>Amet</p>
</div>
</div>
</body>
</html>
JavaScript
//http://amitgharat.wordpress.com/2009/09/25/sort-save-ordering-of-jqueryui-tab-an-hack/
$(function () {
$("#tabs").tabs().find("ul").sortable({
axis : "x",
update: function (e, ui) {
var csv = "";
$("#tabs > ul > li > a").each(function(i){
csv+= ( csv == "" ? "" : "," )+this.id;
});
alert(csv);
}
});
});