Odswiezam temat. Mam taki sam problem jak kolega. Jak dostoswac ten skrypt do dwóch kolumn z obsługą cookie. Bo narazie działa mi to na jednej kolumnie i stany przesunięć są zapisywane, ale w drugiej kolumnie obsługa cookie nie działa. Proszę o rozwiązanie problemu. Z góry dziękuje.
Tak więc dwa pierwsze problemy rozwiązałem ale został trzeci zapisywanie. Próbowałem korzystać z tego sposobu -
http://www.shopdev.co.uk/blog/sortable-lis...sing-jquery-ui/ - no i w przypadku jednej kolumny wsyzstko jest ok, ale gdy chce zrobić więcej kolumn to już nie jest tak łatwo. Próbowałem powielić te funkcję, zmieniając tylko zmienne ale nic z tego.
Jeśli ktoś chce zobaczyć na czym stoję to tu jest kod:
Kod
<style>
li {
border:1px solid #DADADA;
background-color:#EFEFEF;
padding:3px 5px;
margin-bottom:3px;
margin-top:3px;
width:100px;
list-style-type:circle;
font-family:Arial, Helvetica, sans-serif;
color:#666666; :facepalm:
font-size:0.8em;
}
li:hover {
background-color:#FFF;
}
</style>
<script src="js/jquery-1.2.6.min.js" type="text/javascript"></script>
<script src="js/jquery-ui-1.6.custom.min.js" type="text/javascript"></script>
<script src="js/jquery.cookie.js" type="text/javascript"></script>
<script type="text/javascript">
/////////////////////////////////////////////////////////////////
///// EDIT THE FOLLOWING VARIABLE VALUES //////////////////////
/////////////////////////////////////////////////////////////////
// set the list selector
var setSelector = "#list1";
// set the cookie name
var setCookieName = "listOrder";
// set the cookie expiry time (days):
var setCookieExpiry = 7;
// set the list selector
var setSelector2 = "#list2";
// set the cookie name
var setCookieName2 = "listOrder2";
// set the cookie expiry time (days):
var setCookieExpiry2 = 7;
/////////////////////////////////////////////////////////////////
///// YOU PROBABLY WON'T NEED TO EDIT BELOW ///////////////////
/////////////////////////////////////////////////////////////////
// function that writes the list order to a cookie
function getOrder() {
// save custom order to cookie
$.cookie(setCookieName, $(setSelector).sortable("toArray"), { expires: setCookieExpiry, path: "/" });
}
// function that restores the list order from a cookie
function restoreOrder() {
var list = $(setSelector);
if (list == null) return
// fetch the cookie value (saved order)
var cookie = $.cookie(setCookieName);
if (!cookie) return;
// make array from saved order
var IDs = cookie.split(",");
// fetch current order
var items = list.sortable("toArray");
// make array from current order
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++) {
// item id from saved order
var itemID = IDs[i];
if (itemID in rebuild) {
// select item id from current order
var item = rebuild[itemID];
// select the item according to current order
var child = $("ul.ui-sortable").children("#" + item);
// select the item according to the saved order
var savedOrd = $("ul.ui-sortable").children("#" + itemID);
// remove all the items
child.remove();
// add the items in turn according to saved order
// we need to filter here since the "ui-sortable"
// class is applied to all ul elements and we
// only want the very first! You can modify this
// to support multiple lists - not tested!
$("ul.ui-sortable").filter(":first").append(savedOrd);
}
}
}
function getOrder2() {
// save custom order to cookie
$.cookie(setCookieName2, $(setSelector2).sortable("toArray"), { expires: setCookieExpiry2, path: "/" });
}
// function that restores the list order from a cookie
function restoreOrder2() {
var list = $(setSelector2);
if (list == null) return
// fetch the cookie value (saved order)
var cookie = $.cookie(setCookieName2);
if (!cookie) return;
// make array from saved order
var IDs = cookie.split(",");
// fetch current order
var items = list.sortable("toArray");
// make array from current order
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++) {
// item id from saved order
var itemID = IDs[i];
if (itemID in rebuild) {
// select item id from current order
var item = rebuild[itemID];
// select the item according to current order
var child = $("ul.ui-sortable").children("#" + item);
// select the item according to the saved order
var savedOrd = $("ul.ui-sortable").children("#" + itemID);
// remove all the items
child.remove();
// add the items in turn according to saved order
// we need to filter here since the "ui-sortable"
// class is applied to all ul elements and we
// only want the very first! You can modify this
// to support multiple lists - not tested!
$("ul.ui-sortable").filter(":first").append(savedOrd);
}
}
}
// code executed when the document loads
$(function() {
// here, we allow the user to sort the items
$(setSelector).sortable({
axis: "y",
cursor: "move",
handle: "h2",
update: function() { getOrder(); }
});
$(setSelector2).sortable({
axis: "y",
cursor: "move",
handle: "h2",
update: function() { getOrder2(); }
});
// here, we reload the saved order
restoreOrder();
});
</script>
</head>
<body>
<div style='float:left;width:200px;'>
<ul id="list1">
<li id="item-1"><div style='width:100px;height:100px;background:#333;'><h2>przesun</h2>teskt bal bla</div></li>
<li id="item-2">List Item 2</li>
<li id="item-3">List Item 3</li>
<li id="item-4">List Item 4</li>
<li id="item-5">List Item 5</li>
<li id="item-6">List Item 6</li>
</ul>
</div><div style='float:right;width:200px;'>
<ul id="list2">
<li id="item2-1"><div style='width:100px;height:100px;'><h2>przesun</h2>teskt bal bla</div></li>
<li id="item2-2">List Item 2</li>
<li id="item2-3">List Item 3</li>
</ul>
</div>
Czekam na pomoc. :-)