Пользовательский интерфейс сортировки Store and Restore с несколькими списками соединений

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. Затем добавьте к соответствующему сортируемому

Вот рабочая скрипка

Я надеюсь, что это поможет вам.