中級プログラマの自宅でPHP ブログ

自宅用ポータルシステム「MyHome Portal」をオープンソースで公開。MyHome Portalの説明とエンハンス情報。

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
 })
}});