jquery сохранить позиции элементов (сериализовать?)

Question

Как сохранить позиции элементов в div?

Я использую сериализацию, и если да, то как это сделать?

У меня есть этот DIV:

<div id="produtlist"> 
    <img id="productid_10" src="images/pic10.jpg" class="sortableproduct" alt="" title="" /> 
    <img id="productid_11" src="images/image1.jpg" class="sortableproduct" alt="" title="" /> 
    <img id="productid_12" src="images/image2.jpg" class="sortableproduct" alt="" title="" /> 
    <img id="productid_13" src="images/pic1.jpg" class="sortableproduct" alt="" title="" /> 
    <img id="productid_14" src="images/pic2.jpg" class="sortableproduct" alt="" title="" /> 
    <img id="productid_15" src="images/pic3.jpg" class="sortableproduct" alt="" title="" /> 
</div> 

Answer 1

Я использую аналогичную функцию в одном из своих проектов, и у меня есть часть кода, готовая восстановить заказ. Функция принимает 2 параметра:

1. Список контейнеров
2. печенья, которая содержит запятую идентификаторы.

Я использую его, чтобы изменить порядок списков уль основы, но должен работать нормально в вашем случае тоже ...

// Function that restores the list order from a cookie 
function restoreOrder(_list, _cookie) { 

    var list = $('#' + _list); 
    if(list == null) return; 

    // fetch the cookie value (saved order) 
    var cookie = $.cookie(_cookie); 

    if(!cookie) return; 

    // make array from saved order 
    var IDs = cookie.split(","); 

    // fetch current order 
    var items = list.sortable("toArray"); 

    // make array from current order 
    var rebuild = new Array(); 
    for(var v = 0, len = items.length; v < len; v++) 
     rebuild[items[v]] = items[v]; 

    for(var i = 0, n = IDs.length; i < n; i++) { 

     // item id from saved order 
     var itemID = IDs[i]; 

     if(itemID in rebuild) { 

      // select item id from current order 
      var item = rebuild[itemID]; 

      // select the item according to current order 
      var child = $('#' + _list).children('#' + item); 

      // select the item according to the saved order 
      var savedOrd = $('#' + _list).children('#' + itemID); 

      // remove all the items 
      child.remove(); 

      // add the items in turn according to saved order 
      // we need to filter here since the "ui-sortable" 
      // class is applied to all ul elements and we 
      // only want the very first! You can modify this 
      // to support multiple lists - not tested! 
      $('#' + _list).filter(':first').append(savedOrd); 

     } // if 

    } // for 

} // restoreOrder 

Я забыл, где я получил его от каких-то (форумов, которые пришли в то время как Googling) ... но за счет кредитов оригинальному автору. Я немного изменил исходную процедуру, чтобы сделать ее более многоразовой, приняв эти параметры.

Приветствия, Микроскопические^землянина

Answer 2

Ну, если вам просто нужно помнить заказ, вы можете просто затычку разделенных запятых строки из идентификаторов в печенье? И вытащите их обратно на загрузку страницы.

Сериализация работает только с данными формы, насколько я знаю, а не с элементами DOM.

Чтобы решить ваш комментарий, вы бы построить CSV со страницы, используя простой JQuery:

var list = ''; 
$('#productlist .sortableproduct').each(function() { 
    list += this.attr('id') + ','; 
}); 

Затем сохранить список куков, или отправить его обратно на сервер.

Ввод вещей в их порядок немного сложнее. Если вы отправите строку обратно на сервер, было бы гораздо проще просто выводить данные в правильном порядке ... Но вы можете использовать инструменты DOM в jquery для перемещения объектов DOM. Достаточно просто.