У меня есть два контейнера. Я хочу перемещать элементы из одного контейнера в другой и сохранять добавленный контейнер с новыми элементами в файлы 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();
});
Теперь я могу добавить элементы в свой основной контейнер, но при обновлении мои новые элементы исчезают.
Просто отрисуйте свой файл 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);
}