Jquery Sortable 将 portlet 恢复到保存的设置

Question

这里和网络上有很多关于如何保存 jquery 可排序列表的状态的帖子，但是恢复一个呢？

在我的例子中，我正在组织一个页面布局，而不是一个列表，所以我将有一个左右列（或更多）。

这是我过去所做的（使用php+smarty）：

<div id="leftsort">
    {section loop=$leftSort name="ls"}
        {if $leftSort[ls]}{include file="index/sort/`$leftSort[ls]`.tpl"}{/if}
    {/section}
</div>
<div id="rightsort">
    {section loop=$rightSort name="rs"}
        {if $rightSort[rs]}{include file="index/sort/`$rightSort[rs]`.tpl"}{/if}
    {/section}
</div>

每个portlet 都有自己包含的模板文件。当我保存可排序列表的状态时，我将左右列分开保存，以便于恢复。

您将如何恢复可排序列表？

我更喜欢纯 jquery 方式，例如 - 将 portlet 隐藏在页面上，将 json 数组传递给可排序列表，然后在“创建”时对其进行排序并显示 portlet

$( ".selector" ).sortable({
   create: function(event, ui) { 
     -- load sortable positions in a json array --
     -- parse the array and move the hidden portlets into position --
     -- show portlets --
   }
});

对我来说，并不完全需要特定的代码，因此任何概念或想法都值得赞赏。

谢谢！

-- 想像：http://jsfiddle.net/8gYsy/

Answer 1

我已经设法编写了我的概念，但我确实希望有更多的答案！ http://jsfiddle.net/Qwjp9/

这将允许您根据 json 数组恢复保存的位置。所有 portlet 元素都将加载到隐藏的 div 中并移动。我也添加了一个保存示例。

var cols=jQuery.parseJSON('{"col1":["p1","p2"],"col2":["p3"]}');
$( ".column" ).sortable({
    connectWith: ".column",
    create: function(){
        var colid=this.id;      
        var col=cols[colid];
        $.each(col, function(index, value) {
           $('#'+value).appendTo($('#'+colid));
        });
    }, 
    update: function() {
         $.get('saveSortable.php',
              {col: this.id, sort:$(this).sortable('toArray').toString()});
    }                       
});​

Answer 2

http://jsfiddle.net/veLhT/ 的工作示例

HTML代码：

<ul>
  <li>a</li>
  <li>b</li>
  <li>c</li>
  <li>d</li>
  <li>e</li>
</ul>

jQuery 代码：

// store elements
var d=$('ul').html();
// alter data (in your case sort the data)
$('ul li').eq(2).remove();
// reset contents
$('ul').html(d);