jQueryでドラッグアンドドロップの並び替え

jQuery CakePHP PHP

ドラッグアンドドロップで並び替え

ドラッグアンドドロップで項目を並び替えるUIをつくるためのメモ。並び替えた後、ajaxで並び順の値を更新する処理を想定しています。

必要ファイル

HTML

<ul class="sortable">
    <li id="1">りんご</li>
    <li id="2">みかん</li>
    <li id="3">バナナ</li>
</ul>

JavaScript

$(function() {
    $(".sortable").sortable();
    $(".sortable").disableSelection();
    $(".sortable").sortable({
        update: function(event, ui) {
            var data = $(".sortable").sortable("toArray");
            $.ajax('/posts/sort', {
                method: 'POST',
                dataType: 'json',
                data: {sort: data},
                success: function(data){
                }
            });
        }
    });
});

PHP(CakePHP)

$data = array_flip($this->request->data['sort']);

参考リンク