jQuery UI - Сортировка вкладок и запоминание позиции

Как-то порывшись в архивах Google так и не нашел нормального решения этой задачи. Все предложенные варианты работали только в одной из вариаций - либо только с плагином sortable, либо только с плагином cookie.

Итак, начнем.

Нам потребуются следующие библиотеки и плагины.

jQuery версии не ниже 1.6.4. Если хотите адаптировать код под более старую версию, то просто замените prop() на attr()

jQuery UI версии 1.12+ в конфигурации Core, Widget, Mouse, Sortable, Tabs

JavaScript Cookie

Демо

Код Javascript выглядит так:

jQuery(document).ready(function($){
	$('#tabs1').tabs().find('.ui-tabs-nav').sortable({
		axis: 'x',
		update: function(){
			Cookies.set($(this).parent().attr('id'), $(this).sortable('toArray').toString(), { expires: 365 });
		}
	});
	$('#tabs2').tabs().find('.ui-tabs-nav').sortable({
		axis: 'x',
		update: function(){
			Cookies.set($(this).parent().prop('id'), $(this).sortable('toArray').toString(), { expires: 365 });
		}
	});
	$('#tabs3').tabs().find('.ui-tabs-nav').sortable({
		axis: 'x',
		update: function(){
			Cookies.set($(this).parent().prop('id'), $(this).sortable('toArray').toString(), { expires: 365 });
		}
	});

	function restoreOrder(selector){
		var $selector = $(selector),
			cookie = '',
			IDs = [],
			items = [],
			rebuild = [];

		if (!$selector || $selector.length < 1) return;

		$.each($selector, function(key, object){
			if ($(object).hasClass('ui-tabs')) {
				cookie = Cookies.get($(object).prop('id'));

				if (cookie) {
					IDs = cookie.split(',');
					var li = $('ul', object).children('li.ui-tabs-tab');

					$.each($(li), function(i, o) {
						items.push($(o).attr('id'));
					});

					for (var v = 0; v < items.length; v++) {
						rebuild[items[v]] = items[v];
					}

					for (var i = 0; i < IDs.length; i++) {
						var itemID = IDs[i],
							item = rebuild[itemID],
							child = $('.ui-tabs-nav', object).children('#' + item),
							savedOrd = $('.ui-tabs-nav', object).children('#' + itemID);

						child.detach();
						$('.ui-tabs-nav', object).filter(':first').append(savedOrd);
					}
				} else {
					Cookies.set($(object).prop('id'), $('.ui-tabs-nav', object).sortable('toArray').toString(), { expires: 365 });
				}
			}
		});
	}

	restoreOrder('#tabs1, #tabs2, #tabs3');
});

И html структура:

<div id="tabs1">
	<ul>
		<li id="li-1-1"><a href="#tabs-1-1">1 Nunc tincidunt</a></li>
		<li id="li-1-2"><a href="#tabs-1-2">2 Proin dolor</a></li>
		<li id="li-1-3"><a href="#tabs-1-3">3 Aenean lacinia</a></li>
	</ul>
	<div id="tabs-1-1">
		<p>Content for tab1</p>
	</div>
	<div id="tabs-1-2">
		<p>Content for tab2</p>
	</div>
	<div id="tabs-1-3">
		<p>Content for tab3</p>
	</div>
</div>

Для li обязательно нужно указывать ID!