jQuery UI の Sortableは、恐ろしく便利

MyHome Portal Ver.6.01で、RSSリーダーやToDoで、表示順序の変更をマウスのドラッグ&ドロップで出来るようにしましたが、jQuery UI の Sortableを使って実現しています。
http://ok2nd.blog87.fc2.com/blog-entry-379.html

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
 })
}});
スポンサーサイト

はてなブックマークに追加 はてなブックマーク - jQuery UI の Sortableは、恐ろしく便利

theme : JavaScript
genre : コンピュータ

comment

Secret

プロフィール

ok.2nd

Author:ok.2nd
HomePage:
http://ok2nd.web.fc2.com/
Email: m.ok.2nd@gmail.com

最新記事
最新コメント
最新トラックバック
月別アーカイブ
FC2ブログランキング

FC2Blog Ranking

検索フォーム
カテゴリ
リンク
RSSリンクの表示
ブロとも申請フォーム

この人とブロともになる

QRコード
QRコード
ユーザータグ