Структура html
<div class="row" id="sortBlock">
<section class="col-md-4 connectedSortable">
// содержимое секции
</section>
<section class="col-md-4 connectedSortable">
// содержимое секции
</section>
<section class="col-md-4 connectedSortable">
// содержимое секции
</section>
<section class="col-md-4 connectedSortable">
// содержимое секции
</section>
<section class="col-md-4 connectedSortable">
// содержимое секции
</section>
<section class="col-md-4 connectedSortable">
// содержимое секции
</section>
</div>
<script>
$(".connectedSortable .box-header, .connectedSortable .nav-tabs-custom").css("cursor", "move");
var root = $('#sortBlock');
var pathname = window.location.pathname;
var c = cookies.get(pathname);
$('> *', root).each(function (index) {
this.id = 'item-' + index;
});
root.sortable({
// placeholder: "sort-highlight",
connectWith: ".connectedSortable",
handle: ".box-header, .nav-tabs",
forcePlaceholderSize: true,
'update': function (event, ui) {
var order = $(this).sortable('serialize');
cookies.set(pathname, {pathname, order});
}
});
if (c) {
$.each(c.order.split('&'), function () {
var id = this.replace('[]=', '-');
$('#' + id).appendTo(root);
});
}
</script>
Для использования кук был использован плагин.
Первосточник: Хранитель заметок