Как реализовать перемещение div блоков с помощью JqueryUI Sortable(Portlets) и сохранением их на Ajax?

Question

[Артём]

Здравствуйте!

Не так уж давно, у меня возник некий вопрос, ответ на который Я здесь не нашёл. Суть вопроса в следующем.
Как, с помощью JqueryUI(Sortable), сохранить расположение div блоков (у каждого блока есть id="айдиблока"), с помощью Ajax отправить нужную информацию, а именно Номер колонки и ID-блока, а также занести это всё в Mysql - базу.

Получилось реализировать из всего этого списка следующее:
1. Html - разметка, с блоками из Mysql - базы. Вот код:

<div class="header-col">

<div class="portlet" id="154">
<div class="portlet-header">[Авторизация]</div>
<div class="portlet-content">Коментарий не указан</div>
</div>
</div><br><br>
<div class="center-col">
</div>
<div class="footer-col">
</div>

2. Таблицу в Mysql - базе (Сами блоки). Где uid - айди(Уникальный), title - название блока, col - номер колонки и т.д
3. Немного кода Jquery

$(function() {
    $( ".header-col" ).sortable({
      connectWith: ".header-col, .left-col, .right-col, .center-col, .footer-col",
    });

    $( ".center-col" ).sortable({
      connectWith: ".header-col, .left-col, .right-col, .center-col, .footer-col",
    });

    $( ".footer-col" ).sortable({
      connectWith: ".header-col, .left-col, .right-col, .center-col, .footer-col"
    });
 
    $( ".portlet" ).addClass( "ui-widget ui-widget-content ui-helper-clearfix ui-corner-all" )
      .find( ".portlet-header" )
        .addClass( "ui-widget-header ui-corner-all" )
        .prepend( "<span class='ui-icon ui-icon-minusthick'></span>")
        .on( "sortupdate", function( event, ui ) { position } )
        .end()
      .find( ".portlet-content" );
 
    $( ".portlet-header .ui-icon" ).click(function() {
      $( this ).toggleClass( "ui-icon-minusthick" ).toggleClass( "ui-icon-plusthick" );
      $( this ).parents( ".portlet:first" ).find( ".portlet-content" ).toggle();
    });
 
    $( ".header-col" ).disableSelection();
    $( ".footer-col" ).disableSelection();
    $( ".center-col" ).disableSelection();
    $( "#pag2" ).disableSelection();
    $( "#pag1" ).disableSelection();
  });

Заранее спасибо за помощь!
P.S Вот эти Portlet'ы [Ссылка]

Answer 1

[int03e]

Если я правильно понял, то можно просто получать позицию элемента относительно всех остальных, и писать в базу. Потом при отображении сортировать по этому параметру, назовите priority или как-то так. Index.

Answer 2

[Тимур]

В нашем приложении , при срабатывании change() , мы записываем индексы элементов в базу.

Comments

[Артём]

@timych Можно немного подробнее?

[Тимур]

Ну сейчас далеко лезть искать, но смысл такой, что когда назначаете sortable() , то нужно еще и назначить обработку в случае изменения положения элементов в DOM. Вот линк: http://api.jqueryui.com/sortable/#event-change. Далее нужно получить новые индексы ваших элементов. То есть вызвать какую-либо функцию , которая пробежится по нужным элементам , возьмет их индекс index() и id например с помощью attr("id") . Например можно пробежаться по элементом с помощью .each() http://api.jquery.com/each/ Далее просто вызовите свой метод записи в базу . Я не очень дружу с php , но на курсовой решал такую задачу с помощью load(). Также можно использовать ajax(); При загрузке страницы вам просто нужно получить элементы из базы и расставить в правильном порядке, в правильных блоках.