UI sortable Store and Restore with multiple connect 列表

Question

我有一个连接的可排序列表，其中包含三个。我将订单存储在数据库中 (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>

但我有一个数组先前的可排序结果，如

var savedOrder = [["widget5","widget2","widget3","widget1"],["widget4","widget10","widget7"],["widget8","widget9","widget6"]];

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

Answer 1

首先，为什么在页面显示的时候不按照数据库的值重新排列。这个我帮不了你，你自己想办法。

但是，如果要使用 JavaScript/jQuery ，请在文档加载时使用以下内容

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

或创建可排序事件，即；

$(".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);
        });
    });

做了什么？

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

这是一个working fiddle

希望对您有所帮助。