jQuery UI，sortables和带有多个列表的Cookie插件

我正在使用带有cookie插件的jQuery UI可排序插件来设置并获取两个可排序列表的列表。

我找到了这段代码来设置和获取cookie： http ： //www.shopdev.co.uk/blog/sortable-lists-using-jquery-ui/#comment-6441

它适用于我想要的一个列表，但不是两个（我已经在注释中列出了更改但在某处失败）。

我的猜测是我必须为setSelector指定第一个和第二个列表，而不是为列表使用类。 我试过“var setSelector =”＃first，＃second“;但是那不能做到。

想法？

谢谢

$（function（）{

// set the list selector var setSelector = ".sortable"; // set the cookie name var setCookieName = "listOrder"; // set the cookie expiry time (days): var setCookieExpiry = 7; // 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" + setSelector + ".ui-sortable").children("#" + item); // select the item according to the saved order var savedOrd = $("ul" + setSelector + ".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" + setSelector + ".ui-sortable").filter(":first").append(savedOrd); } } } // code executed when the document loads $(function() { // here, we allow the user to sort the items $(setSelector).sortable({ cursor: 'move', items: 'li', //axis: "y", opacity: 0.6, //revert: true, scroll: true, scrollSensitivity: 40, placeholder: 'highlight', update: function() { getOrder(); } }); // here, we reload the saved order restoreOrder(); }); 

}）;

Answer 1

_http：//code.google.com/p/cookies/

_http：//noteskeeper.ru/article/save-state-jquery-ui-sortable/

  root = $("#sidebar"); $('> *', root).each(function (index) { this.id = 'block-' + index; }); root.sortable({ cursor: 'move', revert: true, placeholder: 'ui-state-highlight' }); // function that writes the list order to a cookie root.bind( "sortupdate", function (event, ui) { // save custom order to cookie var order = $(this).sortable('serialize'); $.cookies.set('sortable', order); }); // here, we reload the saved order // fetch the cookie value (saved order) var c = $.cookies.get('sortable'); if (c) { // function that restores the list order from a cookie $.each(c.split('&'), function () { var id = this.replace('[]=', '-'); $('#' + id).appendTo(root); }); } 

Answer 2

你应该替换代码

var setSelector = ".sortable";

至

var setSelector = "#sortable";