0

声明
好的，所以我一直在尝试让jQuery UI 的可排序插件在我的网站上运行。如果您不熟悉该插件，可以在此处查看他们的 API 。经过几天的调试（插件有很多问题），它终于运行良好。然后我花了几天时间研究一种不实用的方法，用 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();
});


[从这个问题的答案中获得的“解决方案”（不起作用）]


排序演示 [无 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）
达斯汀

4

1 回答 1

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();
});
于 2013-03-12T07:41:59.423 回答