jQuery UI の Sortable モジュールでリストをドラッグしてソート可能にする方法

2010年7月27日 15:47 jQuery UI の Sortable モジュールでリストをドラッグしてソート可能にする方法

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要素をドラッグ&ドロップでソートできるようになりました。

Twitterつぶやく
阿部辰也へのお仕事のご依頼・お問合せはこちら

Twitter始めました。Followはお気軽にどうぞ。

関連するブログ記事
スポンサード リンク
カテゴリー
jQuery
タグ
JavaScript | jQuery | jQuery UI | li要素 | ol要素 | script要素 | Sortable | ul要素 | xhtml
現在位置
TOP > Web制作技術 > jQuery > jQuery UI の Sortable モジュールでリストをドラッグしてソート可能にする方法
前のブログ記事
jQuery で POSTメソッドによる非同期通信を行なう方法 [2010年7月26日 17:28]
次のブログ記事
2010年7月の読了本まとめ [2010年8月 8日 23:59]

トラックバック(1)

このブログ記事に対するトラックバックURL:
» jQuery UI − ドラッグ&ドロップ + cookie登録 − web tips 追加(s-ej blog)のトラックバック [2010年11月19日 20:44]
web tips サンプルを追加しました&nbsp;jQuery UI − ドラッグ&ドロップcookie登録過去に某誌に寄稿したjsサンプルの改... 続きを読む

コメント(4)

payday loans [2015年2月25日 14:14]

vpqcjl http://2012paydayloans.net/ payday loans

payday loans guaranteed no fax [2015年8月16日 04:24]

vytiqx http://paydayloansnsa.com/ payday loans guaranteed no fax

fast payday loans [2015年10月 1日 07:25]

jiznaujp http://paydayloans2xj.com/ fast payday loans

payday loans [2015年10月 6日 03:20]

ygpkqk http://paydayloans2xn.com/ payday loans

コメントする


画像の中に見える文字を入力してください。

 

このブログについて

阿部辰也

Webコンサルタントやシステムエンジニア、執筆業などをやっている、グッドホープ代表・阿部辰也のブログです。
Web技術系のTipsから仕事の話、趣味の話まで色々と。
人生は所詮生まれてから死ぬまでの壮大な暇つぶし。
だったら有意義に暇をつぶして生きましょー。

阿部辰也へのお仕事のご依頼・問合せはこちらからどうぞ。

Twitter: @t_abe
読書メーター: ID:Tatsuya

このブログのサイトマップ
このブログのはてなブックマーク数

Feed/RSS購読

タグクラウド

最近のトラックバック

阿部辰也の著書

77のキーワードで知る インターネットで稼ぐ 図解 ブログ・メルマガ・Webサイト構築の基本

77のキーワードで知る インターネットで稼ぐ 図解 ブログ・メルマガ・Webサイト構築の基本

頑張って書いたのに、出版後すぐに出版社が倒産して印税も貰えずじまいで俺涙目(笑)。

Powered by Movable Type 5.02

スポンサード リンク

はてなブックマーク



あわせて読みたい

t-abeの今読んでる本

t-abeの最近読んだ本

t-abeの今やってるゲーム

t-abeの最近やったゲーム