Question

声明
好的，所以我一直试图让jQuery UI's Sortable Plugin在我的网站上工作。如果您不熟悉插件，可以查看他们的API here。经过几天的调试（插件有很多问题），它终于运行良好。然后我花了几天的时间研究一种非实用的方法，将订单存储为带有PHP的cookie，这有一些问题 - 而且我宁愿不用PHP做这件事。

输入jQuery Cookie我相信你们都熟悉。我之前使用它，甚至用它来存储所述可排序部分的切换状态，但我肯定不是它的专业人士（事实上，我真的是Javascript / 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();
});

[以上“解决方案”（不起作用）从对this question] 的回答中获得

排序演示 [不含Cookie] [工作] ：
http://jsfiddle.net/mQGdS/

排序演示 [使用Cookie] [无法正常工作 - 排序仍然有效，Cookie不可用] ：
http://jsfiddle.net/48tJM/2

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

仍然没有运气。：（

结束 [澄清]
上面的jsFiddle（带有cookie）只是试图为#sortablemain创建一个cookie。实际上，我需要创建2个单独的cookie，分别存储两个列表中每个列表的顺序，＃sortable和#sortablemain。如jsFiddle演示中所示，我使用的是jQuery 1.8.3和jQuery UI 1.9.2

很多（真的＆lt; 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();
});

jQuery UI可排序和JS Cookie

1 个答案: