Jquery 使用多连接列表进行UI可排序存储和恢复

我有一个三人的可排序列表。我将订单存储在数据库（MySQL）中，但无法恢复

<div class="sortable1">
<div id="widget1"></div>
<div id="widget2"></div>
<div id="widget3"></div>
</div>

<div class="sortable2">
<div id="widget4"></div>
<div id="widget5"></div>
<div id="widget6"></div>
</div>

<div class="sortable3">
<div id="widget7"></div>
<div id="widget8"></div>
<div id="widget9"></div>
</div>

---

如何使用上面的数组进行恢复？

首先，当您在页面上显示数据库值时，为什么不根据数据库值重新排列呢。这件事我帮不了你，你需要自己解决

但是，如果要使用JavaScript/jQuery，则在加载文档时使用以下命令

$(document).ready(function(){
     //......Code goes here
});

或创建可排序的事件，即：

$(".sortable").sortable(function(){
   create : function(){
           //.......Code goes here
     }
  })

并将以下块添加到相应的块（或任何可排序初始化）

怎么办

• 首先遍历排序顺序的循环
• 选择可排序的项并将其从DOM中分离。然后，附加到 各自可排序

这是一个

---

我希望这会对您有所帮助。

谢谢@Runcorn。你为我做了一件了不起的事。。非常感谢：）

$(".sortable").sortable(function(){
   create : function(){
           //.......Code goes here
     }
  })

    var oldList, newList, item;
    var savedOrder = [
        ["widget5", "widget2", "widget3", "widget1"],
        ["widget4", "widget10", "widget7"],
        ["widget8", "widget9", "widget6"]
    ];
    var sortableSelector;
    $(savedOrder).each(function (key, value) {
        if (key == 0) {
            sortableSelector = ".sortable1";
        } else if (key == 1) {
            sortableSelector = ".sortable2";
        } else {
            sortableSelector = ".sortable3";
        }
        $(value).each(function (i, data) {
            //Detach element from the Document 
            var element = $("." + data).detach();
            //Append it to respective sortable 
            $(sortableSelector).append(element);
        });
    });