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
});

或创建可排序事件，即<; p>

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

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

具有多个连接列表的UI可排序存储和还原

1 个答案:

这是working fiddle