技術資料

error この記事は最終更新日から14年以上が経過しています。

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