Запоминание позиций jQuery UI Sortable

Структура 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>

 

Для использования кук был использован плагин.

Первосточник: Хранитель заметок

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *

Этот сайт использует Akismet для борьбы со спамом. Узнайте, как обрабатываются ваши данные комментариев.