jQueryでドラッグアンドドロップの並び替え
ドラッグアンドドロップで並び替え
ドラッグアンドドロップで項目を並び替えるUIをつくるためのメモ。並び替えた後、ajaxで並び順の値を更新する処理を想定しています。
必要ファイル
- jQuery
- jQuery UI
- jquery.ui.core.min.js
- jquery.ui.widget.min.js
- jquery.ui.mouse.min.js
- jquery.ui.sortable.min.js
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']);