scriptaculous.jsを使ったドラッグできるソート処理を書くよ。
下準備。
まずはprototype.js と scriptaculous.jsを呼び出す。
<script src="/js/prototype.js" type="text/javascript"></script> <script src="/js/scriptaculous/scriptaculous.js" type="text/javascript"></script>
でHTMLソースはこんな感じを想定。
<div id="sortResult">ここに結果</div> <ul id="sortList"> <li id="elem_a"><span class="handle">ドラッグ</span>A</li> <li id="elem_b"><span class="handle">ドラッグ</span>B</li> <li id="elem_c"><span class="handle">ドラッグ</span>C</li> <li id="elem_d"><span class="handle">ドラッグ</span>D</li> </ul>
ソートさせたらその状態をすぐに保存する場合。
Sortable.create('sortList',{ constraint:'vertical', handle:'handle', onUpdate:function(){ var params = 'order=' + Sortable.serialize('sortList'); new Ajax.Request('sort.php', { method: 'post', onComplete: getResponse, parameters: params } ); function getResponse(req){ $('sortResult').innerHTML = req.responseText; } } } );
オプションにhandleを指定しているので「ドラッグ」をつまみに使います。
constraintは移動方向制限。’vertical’は垂直方向のみ。
他にもオプションはいっぱいあります。
onUpdateにfunction登録しているのでドラッグ後にsort.phpにPOSTでorderパラメーターに順番が渡されます。
sort.php
foreach ($_POST['order'] as $key => $value){ //保存処理 //$key 順番 //$value エレメント要素 } echo '変更しました。';
ここでechoした内容がsortResultエレメントに表示されるよ。
成功とか失敗とかアナウンスに使うと良いでしょう。
