Jquery sortbale cookie storage sorting

Js Code
<Div class = "demo">

<Div class = "column">

<Div class = "portlet">
<Div class = "portlet-header"> Feeds </div>
<Div class = "portlet-content"> Lorem ipsum dolor sit amet, consectetuer adipiscing elit </div>
</Div>

<Div class = "portlet">
<Div class = "portlet-header"> News </div>
<Div class = "portlet-content"> Lorem ipsum dolor sit amet, consectetuer adipiscing elit </div>
</Div>

</Div>

<Div class = "column">

<Div class = "portlet">
<Div class = "portlet-header"> Shopping </div>
<Div class = "portlet-content"> Lorem ipsum dolor sit amet, consectetuer adipiscing elit </div>
</Div>

</Div>

<Div class = "column">

<Div class = "portlet">
<Div class = "portlet-header"> Links </div>
<Div class = "portlet-content"> Lorem ipsum dolor sit amet, consectetuer adipiscing elit </div>
</Div>

<Div class = "portlet">
<Div class = "portlet-header"> Images </div>
<Div class = "portlet-content"> Lorem ipsum dolor sit amet, consectetuer adipiscing elit </div>
</Div>

</Div>

</Div>

Js Code:

<Mce: script type = "text/javascript"> <! --
$ (Function (){
$ (". Column"). sortable ({
ConnectWith: '. column'
});

$ (". Portlet"). addClass ("ui-widget-content ui-helper-clearfix ui-corner-all ")
. Find (". portlet-header ")
. AddClass ("ui-widget-header ui-corner-all ")
. Prepend ('<span class = "ui-icon-minusthick ui-icon"> </span> ')
. 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 ();
});

$ (". Column"). disableSelection ();
});

// --> </Mce: script>

Below is the Save code

<Mce: script type = "text/javascript"> <! --
Function MadeDiv ()
{
If (! $. Cookie ("dao_list ")){
$. Cookie ("dao_list", "c1: 0 @ 1 @ 2 @ 3 @ 4 @ | c2: 5 @ 6 @ 7 @ 8 @ 9 @");
}
Var list = $. cookie ("dao_list ");
Var arrColumn = list. split ('| ');
$. Each (arrColumn, function (m, n ){
Var elemId = n. split (':') [0];
Var arrRow = n. split (':') [1]? N. split (':') [1]. split ('@'):"";
$. Each (arrRow, function (m, n ){
If (n ){
$ ("#" + ElemId). append ($ ("# dao_hang" + n). attr ('id', n ))
}
});
})

$ (". Column"). sortable ({
ConnectWith: '. column ',
Handle: '. portlet-head ',
Cursor: 'move ',
Stop: saveLayout
});


$ (". Portlet"). addClass ("ui-widget-content ui-helper-clearfix ui-corner-all ")
. Find (". portlet-header ")
. AddClass ("ui-widget-header ui-corner-all ")
. Prepend ('<span class = "ui-icon-closethick" title = \ "click to delete navigation \"> </span> ')
. End ()
. Find (". portlet-content ");

$ (". Portlet-header. ui-icon"). click (function (){
Var this_box = $ (this). parent (). parent (). closest ("div"). remove ();
SaveLayout ();
});
$ (". Column"). disableSelection ();
$ (". Column"). sortable ({forcePlaceholderSize: true });
}
Function saveLayout (){
Var list = "";
$. Each ($ (". column"), function (m ){
List + = $ (this). attr ('id') + ":";
$. Each ($ (this). children (". portlet"), function (d ){
List + = $ (this). attr ('id') + "@";
})
List + = "| ";
})
$. Cookie ("dao_list", list, {expires: 300 });
}
Function moren ()
{
$. Cookie ("dao_list", "c1: 0 @ 1 @ 2 @ 3 @ 4 @ | c2: 5 @ 6 @ 7 @ 8 @ 9 @", {expires: 300 });
Window. location. reload ();
}