jQuery UI の Sortableは、恐ろしく便利
MyHome Portal Ver.6.01で、RSSリーダーやToDoで、表示順序の変更をマウスのドラッグ&ドロップで出来るようにしましたが、jQuery UI の Sortableを使って実現しています。
http://ok2nd.hatenablog.com/entry/2013/09/01/074917
jQuery UI の Sortableは恐ろしく便利です。
ドラッグ&ドロップ機能が簡単に実現できるだけでなく、並び替えた後の順番情報を簡単に取得できます。
並び替えたいコンテンツにID番号を振っておきます。
<div id="container"> <div id="11">あ</div> <div id="12">い</div> <div id="13">う</div> <div id="14">え</div> <div id="15">お</div> </div>
.sortable("toArray")を使うだけで、並び替えた後のIDの番号をカンマ区切りで返してくれます。
例えば、12,13,11,14,15といった文字列で返してくれます。これをlocation.hrefやajaxでサーバーサイドのモジュールに渡してやって、データベース上の並び替え処理をしてやれば、並び替え結果を保持できます。
$("#container").sortable({stop: function(event, ui) { id_nums = $("#container").sortable("toArray"); location.href='content-renum.php?ids='+id_nums; }}); $("#container").sortable({stop: function(event, ui) { id_nums = $("#container").sortable("toArray"); $.ajax({ type: "GET", url: "content-renum.php", data: "ids="+id_nums, async: false }) }});