JQuery UI Сортируемый и JS Cookie

Question

Заявление
Хорошо, так что я пытался получить jQuery UI's Sortable Plugin работать на моем сайте. Вы можете проверить их API here, если вы не знакомы с плагином. После нескольких дней отладки (было много проблем с плагином), он, наконец, работает хорошо. Затем я провел пару дней, работая над практическим способом хранения заказа как куки с PHP, который имел некоторые проблемы - и я бы предпочел не делать этого с 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]

Сортировочная Demo[ без файлов cookie] [работает]:
http://jsfiddle.net/mQGdS/

Сортировочная Demo[с печеньем] [не работает - сортировка по-прежнему работает, печенье не]:
http://jsfiddle.net/48tJM/2

Другая неудачная попытка демонстрации файлов cookie (другой метод cookie):
http://jsfiddle.net/mQGdS/3 (получено из ответа this question).

Все еще не повезло. :(

В Закрыв[разъяснение]
выше jsFiddle (с печеньем) только пытается создать печенье для #sortablemain. На самом деле, мне нужно создать 2 отдельные куки, сохраняя порядок каждого из двух списков, #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(); 
});