[jQuery] Sortable and Cookie/history, need some help

[eugene33]

Hello,

I'm trying to make a frontpage like iGoogle, it works very nicely with
sortable but I cant get to keep the changes users made.  each loading
the changes disapear
I tried two options:
 * Cookie with the plugin from 
www.stilbuero.de/2006/09/17/cookie-plugin-for-jquery/
 * Serialize which gives me a nice hash but don't really know what to
do with it

I'm using Jquerry 1.2.3 and Jquery.UI 1.5b

I have another problem with the "additems" function, I would like to
increment the '+i+' and refresh the newly made module to be able to
sort it

Any help would be greatly appreciated

<code>
<script type="text/javascript">
jQuery.noConflict();

 function addItems(e) {
        for (var i = e - 1; i >= 0; i--){
                jQuery('.Col').append('<div class="Mod" id=""'+i+'"">Additional
Content</div>');
        };
 }

jQuery(window).bind("load",function(){
        jQuery("#content").sortable({
                items: ".Mod",
                revert: true,
                scroll: false,
                opacity: 20,
                containment: 'parent',
                placeholder: 'SortHelper', //the class te placeholder should 
have
                placeholderElement: '> div', //Due to IE's shitty rendering,....
                sort: function(e, ui)
                        {
                        serialize(".Col");
                        },
                update: function()
                        {
                        jQuery.cookie('test', 'serialize', { expires: 7 });
                        },
                });

});

function serialize(s)
{
    var str = [];
    var key = 'myKey[]=';
    var delimiter = '&'
    jQuery(s + "> *").not('.ui-sortable-helper').each(function() {
        str.push(key+this.getAttribute('id'));
    });
};
</script>
</head>
..........
<div id="content">
<div class="Col ">
        <div class="Mod" id="1">
                ----- My content ---------
        </div>
        <div class="Mod" id="2">
                ----- My content ---------
        </div>
        <div class="Mod" id="3">
                ----- My content ---------
        </div>
</div>
<div class="Col ">
        <div class="Mod" id="4">
                ----- My content ---------
        </div>
        <div class="Mod" id="5">
                ----- My content ---------
        </div>
        <div class="Mod" id="6">
                ----- My content ---------
        </div>
</div>
</div>