jquery ui sortable で並び順を取得する(serialize)

参考：http://api.jqueryui.com/sortable/#method-serialize

ここで、item_1、item_2といった感じで連番ふるよといいましたが、どちらかというと並び替えの場合、並び替え対象でDBのIDで管理しないといけないと思いますので、item_idという感じにした方がよかったです。

cakePHPだと、下記のような感じにするといいのではないでしょうか。

item_<?php echo h($item['Item']['id'])?>

$(this).sortable(‘serialize’);で下記のようなデータが得られます。

item[]=2&amp;item[]=1

2と1がIDであれば、これをそのままAjaxでsortアクションなんかに渡します。以下は例です。

function save_sort(sort_data){
    $.ajax({
        type:'post',
        url: '<?php echo $this->Html->url(array( 'controller' => 'hogehoge', 'action' => 'sort'))?>',
        data: sort_data,
        dataType: 'html',
        async: true,
        success: function(data){
            alert('sort ok!');
        }
    });
}

$(function(){
    $('#sortable').sortable({
        cursor: 'move',
        opacity: 0.7,
        placeholder: "placeholder",
        forcePlaceholderSize: true,
        cancel:false,
        handle:'.move_btn',
        update: function(event, ui){
            save_sort($(this).sortable('serialize'));
        }
    });
});

これでhogehogeコントローラーのsortアクションにアクセスしてくれて、$this->request->dataの中にソートデータが下記のように入っております。Formのシリアライズと一緒です。便利です。