jQuery UI の Sortable モジュールでリストをドラッグしてソート可能にする方法
2010年7月27日 15:47
ul要素や ol要素で作成したリストを、マウスのドラッグ＆ドロップで好きなようにソート可能にする jQuery のモジュール「Sortable」の解説です。
1. Sortable モジュールの入手
Sortable を利用するためには、通常の jQuery ソースコード以外に、jQuery UI のモジュールをいくつか読み込む必要があります。
jQuery UI - Configure your download から jQuery UI モジュールをダウンロードしましょう。
上記サイトには、Sortable 以外にも沢山のモジュールが用意されていますが、とりあえず Sortable の機能を利用したいだけの場合は、以下の四つのモジュールを選択すればOKです。
- Core
- Widget
- Mouse
- Sortable
2. script要素で各種モジュールを読み込む
ダウンロードしたら、各種モジュールを script要素で指定して読み込みます。
この際注意するべきことは、
- 各種モジュールは jquery.js よりも後に指定する
- 各種モジュールの jsファイルは順番通りに指定する
- その他の外部 jsファイルがある場合は、各種モジュールより後に指定する
といったあたりでしょうか。
<script type="text/javascript" src="jquery.js"></script> <script type="text/javascript" src="jquery.ui.core.js"></script> <script type="text/javascript" src="jquery.ui.widget.js"></script> <script type="text/javascript" src="jquery.ui.mouse.js"></script> <script type="text/javascript" src="jquery.ui.sortable.js"></script>
3. ソースのコーディングとリストの id指定
まず、ソートしたいリストに id をつけます。
<ul id="sort_list"> <li>火吹山の魔法使い</li> <li>バルサスの要塞</li> <li>運命の森</li> <li>さまよえる宇宙船</li> <li>盗賊都市</li> <li>死のワナの地下迷宮</li> </ul>
今回は「sort_list」という id をつけました。
続いて、jQuery のコードを書きます。
$(function() {
$("#sort_list").sortable({items:"li"});
});
これだけてOKです。
これで、「sort_list」内の li要素をドラッグ＆ドロップでソートできるようになりました。
つぶやく
- 関連するブログ記事
-
スポンサード リンク
- 現在位置
- TOP > Web制作技術 > jQuery > jQuery UI の Sortable モジュールでリストをドラッグしてソート可能にする方法
- 前のブログ記事
- jQuery で POSTメソッドによる非同期通信を行なう方法 [2010年7月26日 17:28]
- 次のブログ記事
- 2010年7月の読了本まとめ [2010年8月 8日 23:59]
トラックバック(1)
» jQuery UI − ドラッグ＆ドロップ ＋ cookie登録 − web tips 追加(s-ej blog)のトラックバック
[2010年11月19日 20:44]
web tips サンプルを追加しました jQuery UI − ドラッグ＆ドロップcookie登録過去に某誌に寄稿したjsサンプルの改... 続きを読む
コメント(4)
vpqcjl http://2012paydayloans.net/ payday loans
vytiqx http://paydayloansnsa.com/ payday loans guaranteed no fax
jiznaujp http://paydayloans2xj.com/ fast payday loans
ygpkqk http://paydayloans2xn.com/ payday loans
コメントする