jquery enregistrer les positions des éléments (sérialiser?)

Question

Comment enregistrer les positions d'éléments dans un div?

Est-ce que j'utilise sérialiser et si oui comment le faire?

Je possède ce 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

J'utilise une fonction similaire dans un de mes projets et j'ai un morceau de code prêt à restaurer la commande. La fonction prend 2 paramètres:

1. le récipient liste
2. Le cookie qui contient le séparés par des virgules ID.

Je l'utilise pour réorganiser les listes en fonction ul, mais devrait fonctionner correctement dans votre cas aussi ...

// 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 

J'ai oublié où je l'avais obtenu de (certains forum ou un blog qui est venu en cours de googling) ... mais les crédits dus à l'auteur original. J'ai un peu modifié la routine d'origine pour la rendre plus réutilisable en acceptant ces paramètres.

Cheers, ^ MICROSCOPIQUES Earthling

Answer 2

Eh bien, si vous avez juste besoin de se rappeler l'ordre, vous pouvez simplement bondes une chaîne délimitée par des virgules des id dans un cookie? Et retirez-les au chargement de la page.

La sérialisation ne fonctionne que sur les données de formulaire, autant que je sache, et non sur les éléments DOM.

Pour répondre à votre commentaire, vous souhaitez construire un fichier CSV à partir de la page en utilisant jquery simple:

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

Ensuite, vous enregistrez la liste à un cookie, ou l'envoyer au serveur.

Remettre les choses dans leur ordre est un peu plus difficile. Si vous renvoyez la chaîne au serveur, il serait beaucoup plus simple de sortir les choses dans le bon ordre ... Mais vous pouvez utiliser les outils DOM de jquery pour déplacer les objets DOM. Assez simple dans les deux cas.