jQuery UI-Sortable Cookie не работает

0

рабочий jsfiddle

У меня есть два контейнера. Я хочу перемещать элементы из одного контейнера в другой и сохранять добавленный контейнер с новыми элементами в файлы cookie

HTML

<div id="side">
    <div id="items1">item1</div>
    <div id="items2">item2</div>
    <div id="items3">item3</div>
    <div id="items4">item4</div>
    <div id="items5">item5</div>
    <div id="items6">item6</div>
</div>

<div id="external">
    <div id="items1">item1</div>
    <div id="items2">item2</div>
    <div id="items3">item3</div>
    <div id="items4">item4</div>
    <div id="items5">item5</div>
    <div id="items6">item6</div>
</div>

Когда я сортирую элементы внутри #side, файлы cookie работают нормально.

JQuery

  var selector = "#side";
        var setCookieName = "listOrder";
        var setCookieExpiry = 7;
        function getOrder() {

        $.cookie(setCookieName, $(selector).sortable("toArray"), { expires: setCookieExpiry, path: "/" });
    }

    function restoreOrder() {
        var list = $(selector);
        if (list == null) return

        var cookie = $.cookie(setCookieName);

        var IDs = cookie.split(",");

        var items = list.sortable("toArray");

        var rebuild = new Array();
        for ( var v=0, len=items.length; v<len; v++ ){
            rebuild[items[v]] = items[v];
        }

        for (var i = 0, n = IDs.length; i < n; i++) {

            var itemID = IDs[i];
            if (itemID in rebuild) {
                var item = rebuild[itemID];
                var child = $("div#side.ui-sortable").children("#" + item);
                var savedOrd = $("div#side.ui-sortable").children("#" + itemID);
                child.remove();
                $("div#side.ui-sortable").filter(":first").append(savedOrd);
            }
        }
    }

    $(document).ready(function() {
 $("#side, #external").sortable({ //source is my different container
                cursor: "move",
                connectWith: "#external",
                update: function() { getOrder(); }
            });
            restoreOrder();
        });

Теперь я могу добавить элементы в свой основной контейнер, но при обновлении мои новые элементы исчезают.

Теги:
cookies
jquery-ui-sortable

1 ответ

0
Лучший ответ

Просто отрисуйте свой файл cookie в #side div.

function restoreOrder() {
  var IDs = $.cookie(setCookieName).split(","),
    item, items = "";
  for (var i = 0, len = IDs.length; i < len; i++) {
    item = IDs[i];
    items += "<div id='" + item + "'>" + item + "</div>";
  }
  $("#side").html(items);
}

Ещё вопросы

Сообщество Overcoder
Наверх
Меню