jQuery UI Sortable和JS Cookie

Question

该声明
好的，所以我一直在尝试使jQuery UI的Sortable Plugin可以在我的网站上工作。 如果您不熟悉此插件，可以在此处查看其API。 经过几天的调试（插件有很多问题），它终于可以正常工作了。 然后，我花了几天的时间研究一种用PHP将订单存储为Cookie的非实用方法，这种方法存在一些问题-我还是不愿意使用PHP。

输入jQuery Cookie，我确定您都熟悉。 我以前用过它，甚至用它来存储所述可排序部分的切换状态，但是我当然不是它的专业人士（实际上，我真的是Java / jQuery的新手）。

无论如何，我已经在StackOverflow以及其他地方看到了几个问题，讨论了这个话题并介绍了各种人的解决方案。 但是，所有这些解决方案似乎都存在1-4岁，对我不起作用。 可能只是我在执行他们的代码时做错了什么-肯定不是不可能，我没有任何经验。

话虽如此，如果您能看一下我的演示/代码并告诉我有什么问题，或者只是帮助我完全重写它以使其工作，我将不胜感激。

编码

function restoreOrder() {
    var cookie = $.cookie('cookie_name');
    if (!cookie) return;
    var SavedID = cookie.split('|');
    for ( var u=0, ul=SavedID.length; u < ul; u++ ){ SavedID[u] = SavedID[u].split(',');}
    for (var Scolumn=0, n = SavedID.length; Scolumn < n; Scolumn++) {
        for (var Sitem=0, m = SavedID[Scolumn].length; Sitem < m; Sitem++) {
            $("#sortablemain").eq(Scolumn).append($("#sortablemain").children("#" + SavedID[Scolumn][Sitem]));
        }
    }
}

$(function() {
    $( "#sortable" ).sortable({
    handle: "h3",
    cursor: "move",
    axis: "y",
    placeholder: "marker",
    opacity: 0.3,
    scrollSpeed: 50,
    containment: '#sortable',
    forcePlaceholderSize: true,
    scroll: true,
    scrollSensitivity: 100,
    revert: 200,
    helper: 'clone',
    tolerance: 'pointer'
    });
});

$(function() {
    $( "#sortablemain" ).sortable({
    handle: "h2",
    cursor: "move",
    axis: "y",
    placeholder: "marker",
    opacity: 0.3,
    scrollSpeed: 50,
    containment: '#sortablemain',
    forcePlaceholderSize: true,
    scroll: true,
    scrollSensitivity: 100,
    revert: 200,
    helper: 'clone',
    tolerance: 'pointer',
    update: function(event, ui) {
          var cooked = [];
          $( "#sortablemain" ).each(function(index, domEle){ cooked[index]=    $(domEle).sortable('toArray');});
          $.cookie('cookie_name', 'x'+cooked.join('|'), { expires: 7, path: '/'});
      }
    });
});

$(document).ready(function(){
    restoreOrder();
});

[在从此问题的答案获得的“解决方案”（不起作用）之上）

排序演示 [没有cookie] [工作] ：
http://jsfiddle.net/mQGdS/

排序演示 [使用cookie] [不起作用-排序仍然有效，cookie无效] ：
http://jsfiddle.net/48tJM/2

另一个失败的cookie演示尝试（不同的cookie方法） ：
http://jsfiddle.net/mQGdS/3 （从回答获得了这个问题 ）。

仍然没有运气。 :(

闭幕式 [澄清]
上面的jsFiddle（带有cookie）仅尝试为#sortablemain创建一个cookie。 实际上，我需要创建2个单独的cookie，分别存储两个列表#sortable和#sortablemain的顺序。 如jsFiddle演示所示，我正在使用jQuery 1.8.3和jQuery UI 1.9.2。


非常感谢（<3），
达斯汀

Answer 1

好吧，记住男孩是女孩...您需要包含外部js，例如cookie.jquery.js ...

我尝试过的所有cookie方法显然都有效。 我只是浪费了很多时间，因为我只是忘了包含cookie.jquery.js

辛苦了

最后的工作示例： http : //jsfiddle.net/48tJM/5/

function restoreOrderSidebar() {
    var cookie = $.cookie('cookie_sidebar');
    if (!cookie) return;
    var SavedID = cookie.split('|');
    for ( var u=0, ul=SavedID.length; u < ul; u++ ){ SavedID[u] = SavedID[u].split(',');}
    for (var Scolumn=0, n = SavedID.length; Scolumn < n; Scolumn++) {
        for (var Sitem=0, m = SavedID[Scolumn].length; Sitem < m; Sitem++) {
            $("#sortable").eq(Scolumn).append($("#sortable").children("#" + SavedID[Scolumn][Sitem]));
        }
    }
}

function restoreOrderMain() {
    var cookie = $.cookie('cookie_main');
    if (!cookie) return;
    var SavedID = cookie.split('|');
    for ( var u=0, ul=SavedID.length; u < ul; u++ ){ SavedID[u] = SavedID[u].split(',');}
    for (var Scolumn=0, n = SavedID.length; Scolumn < n; Scolumn++) {
        for (var Sitem=0, m = SavedID[Scolumn].length; Sitem < m; Sitem++) {
            $("#sortablemain").eq(Scolumn).append($("#sortablemain").children("#" + SavedID[Scolumn][Sitem]));
        }
    }
}

$(function() {
    $( "#sortable" ).sortable({
    handle: "h3",
    cursor: "move",
    axis: "y",
    placeholder: "marker",
    opacity: 0.3,
    scrollSpeed: 50,
    containment: '#sortable',
    forcePlaceholderSize: true,
    scroll: true,
    scrollSensitivity: 100,
    revert: 200,
    helper: 'clone',
    tolerance: 'pointer',
    update: function(event, ui) {
          var cooked = [];
          $( "#sortable" ).each(function(index, domEle){ cooked[index]=    $(domEle).sortable('toArray');});
          $.cookie('cookie_sidebar', 'x'+cooked.join('|'), { expires: 31, path: '/'});
      }
    });
});

$(function() {
    $( "#sortablemain" ).sortable({
    handle: "h2",
    cursor: "move",
    axis: "y",
    placeholder: "marker",
    opacity: 0.3,
    scrollSpeed: 50,
    containment: '#sortablemain',
    forcePlaceholderSize: true,
    scroll: true,
    scrollSensitivity: 100,
    revert: 200,
    helper: 'clone',
    tolerance: 'pointer',
    update: function(event, ui) {
          var cooked = [];
          $( "#sortablemain" ).each(function(index, domEle){ cooked[index]=    $(domEle).sortable('toArray');});
          $.cookie('cookie_main', 'x'+cooked.join('|'), { expires: 31, path: '/'});
      }
    });
});

$(document).ready(function(){
    restoreOrderMain();
    restoreOrderSidebar();
});