jQuery UI排序和JS Cookie

问题描述：

声明
好吧，所以我一直在努力让jQuery UI's Sortable Plugin在我的网站上工作。如果您不熟悉该插件，可以查看他们的API here。经过几天的调试（插件有许多问题），它终于可以正常工作了。然后，我花了几天的时间处理一个非实际的将订单存储为cookie的问题，这种方式存在一些问题 - 我宁愿不用PHP来完成。jQuery UI排序和JS Cookie

输入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获得]

分院演示[没有饼干] [工作]：
http://jsfiddle.net/mQGdS/

分院演示[与饼干] [不工作 - 整理仍然有效，cookies不]：
http://jsfiddle.net/48tJM/2

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

仍然没有运气。 :(

结束语[澄清]
上面的jsfiddle（与cookies）只试图创建用于#sortablemain的cookie。在现实中，我需要创建2块独立的饼干，存储所述顺序分别为#sortable和#sortablemain，如jsFiddle演示所示，我使用的是jQuery 1.8.3和jQuery UI 1.9。2

很多（真的< 3）赏识，
达斯汀

答

好，记住男生是女生......你需要包括外部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

相关推荐