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）賞識，
達斯汀

來源

2013-03-12 Dustin Perolio

好，記住男生是女生......你需要包括外部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-12 07:41:59

jQuery UI排序和JS Cookie

回答

相關問題