HTML+CSS+JavaScript

Есть код вида:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js" type="text/javascript"></script>  <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.7/jquery-ui.min.js" type="text/javascript"></script>        <style>     .shaft { width: 170px; float: left; padding-bottom: 100px; }     .content { margin: 0 1em 1em 0; border: 2px solid;}     .content-header { margin: 0.3em; padding-bottom: 4px; padding-left: 0.2em; text-align: center; color: blue;}     .content-header .ui-icon { float: right; }     .content-text { padding: 0.4em; }     .ui-sortable-placeholder { border: 1px dotted black; visibility: visible !important; height: 100px !important; }     .ui-sortable-placeholder * { visibility: hidden; }     </style>       <script>     $(function() {         $( ".shaft" ).sortable({             connectWith: ".shaft" // связываем класс shaft с методом sortable, который отвечает за перетаскивание блоков          });           //ниже добавляем воспомогательные класс.         //Главный- .content, это сам перетаскиваемый блок.         $( ".content" ).addClass( "ui-widget ui-widget-text ui-helper-clearfix ui-corner-all" )             .find( ".content-header" )                 .addClass( "ui-widget-header ui-corner-all" )                 .prepend( "<span class='ui-icon ui-icon-minusthick'></span>")                 .end()             .find( ".content-text" );           // заменяем блоки друг другом         $( ".content-header .ui-icon" ).click(function() {             $( this ).toggleClass( "ui-icon-minusthick" ).toggleClass( "ui-icon-plusthick" );             $( this ).parents( ".content:first" ).find( ".content-text" ).toggle();         });           $( ".shaft" ).disableSelection(); // сбрасываем перетаскиваемый блок     });     </script>     <div class="shaft">       <div class="content">         <div class="content-header">Комментарии</div>         <div class="content-text">Текст</div>     </div>       <div class="content">         <div class="content-header">Новости</div>         <div class="content-text">Текст</div>     </div>   </div>   <div class="shaft">       <div class="content">         <div class="content-header">Записи</div>         <div class="content-text">Текст.</div>     </div> <div class="content">         <div class="content-header">Заметка</div>         <div class="content-text">Текст</div>     </div>       <div class="content">         <div class="content-header">Картинка</div>         <div class="content-text">Текст</div>     </div> </div>

Этот код, как многие наверно догадались позволяет перетаскивать элементы. Но вот возник вопрос, после того, как пользователь их перетащит, как сделать, чтобы сайт запомнил их расположение? Может, записывать в бд? Но каким образом?
П.С. количество элементов может изменяться.

Считайте при помощи метода position() положение элемента относительно верхнего угла и отправьте его при помощи AJAX-запроса серверу.

Я так понимаю, это нужно делать тогда, когда пользователь меняет элементы местами? Если да, то проблема не в этом. Проблема в том, как хранить в бд всё это. И выводить на готовую страницу.
+++
П.С. Я дал не много не тот код. В коде из первого поста, элементы могут располагаться в 2 столбика. А в моём случае, в один столбик (или строку, зависит от css).

Придумал хранить позиции элементов в бд, но для этого нужно как-то установить их последовательность на странице.. Можете как-то по подробнее рассказать про метод position() ? Он к jQuery относится?

Да, метод position() относится к jQuery. Возвращает он объект, который содержит элементы top и left, которые можно использовать для получения координат.