Структура 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>
Для использования кук был использован плагин.
Первосточник: Хранитель заметок