jQuery sortable（）：ソート順をクッキーで表示する方法は？

Question

jQueryのソート可能なアイテムをソート可能なアイテムのオーダーにクッキーに保存する必要があります。ここで私は動作しているjQueryコードを持っています。私はこの同じ機能をクッキーに使う必要があります。

誰でもそれを行うことができます。 bcos私はjQueryでそれほど良いものではありません。ここで

が私の存在HTML

<ul id="boxes" style="margin-top:5px;">  
    <li id="box1" class="con"> 
     <div class="drag"></div> 
     <p>Box 01</p> 
    </li> 
    <li id="box2" class="con"> 
     <div class="drag"></div> 
     <p>Box 02</p> 
    </li> 
    <li id="box3" class="con"> 
     <div class="drag"></div> 
     <p>Box 03</p> 
    </li> 
    <li id="box4" class="con"> 
     <div class="drag"></div> 
     <p>Box 04</p> 
    </li> 
</ul>​ 

とJQ

var arrValuesForOrder = ["3", "1", "4", "2"]; 
    var ul = $("#boxes"), 
     items = $("#boxes li.con"); 

    for (var i = arrValuesForOrder[arrValuesForOrder.length - 1]; i >= 0; i--) { 
     // arrValuesForOrder[i] element to move 
     // i = index to move element at 
     ul.prepend(items.get(arrValuesForOrder[i] - 1)); 
    } 

     $("#boxes").var arrValuesForOrder = ["3", "1", "4", "2"]; 
    var ul = $("#boxes"), 
     items = $("#boxes li.con"); 

    for (var i = arrValuesForOrder[arrValuesForOrder.length - 1]; i >= 0; i--) { 
     // arrValuesForOrder[i] element to move 
     // i = index to move element at 
     ul.prepend(items.get(arrValuesForOrder[i] - 1)); 
    } 

    $("#boxes").sortable({ 
     handle : '.drag', 
     revert: true , 
     opacity: 0.7, 
     placeholder: 'placeholder', 
     update: function() { 
      var order = $('#boxes').sortable('serialize'); 
      alert(order); 
     }({ 
      handle : '.drag', 
      revert: true , 
      opacity: 0.7, 
      placeholder: 'placeholder', 
      update: function() { 
       var order = $('#boxes').sortable('serialize'); 
       alert(order); 
      } 

である私は、クッキープラグインで解決策を見つけたhttp://jsfiddle.net/sweetmaanu/82r5v/6/

Answer 1

ここにあなたのデモを表示することができます。クッキーに結果を保存し、あなただけのjQueryのクッキーのプラグインを使用して順序をシリアル化できませんでしたボックス

$("#boxes").sortable({ 
     handle : '.drag', 
     revert: true , 
     opacity: 0.7, 
     placeholder: 'placeholder', 
     update: function() { 
      var order = $("#boxes").sortable("toArray").join(',').replace(/[a-zA-Z]/gi, ""); 
      $.cookie("box_order",order, {expires: 365, path: '/'}); 
     } 
    });