jQuery Sortablesでドラッグ&ソータブル [Javascript] All About

前々回は Draggables でDOM要素をドラッグし、前回は Droppables でドロップ操作を試しました。

今回は、リストの順序をドラッグドロップで変更できるソータブルをjQuery UI の Sortablesで試します。

jQuery
- Download jquey.js (-1.2.2.min.js)
UI/Sortables
- Sortables デモ
- ダウンロード jquery.ui (v1.0は、stopが動作しないので1.0.1a以降を入手してください)
jQueryのダウンロードと設置

Sortables

Sortablesは、LI要素などの順序をドラッグドロップで動的に変更できるインターフェイスです。 WebアプリやCGIなどで、順序なﾇに関する設定のグラフィカルユーザー入力を、手軽に実装することができるようになります。

Sortablesを使うためには、jquery.js(今回使ったバージョンは1.2.2。以下カッコ内は今回バージョン)の他に jquery.dimensions.js(ui v1.0.1a)、ui.mouse.js(ui v1.0.1a)、そして、ui.sortable.js(ui v1.0.1a)のファイルが必要になります。

まず、そのインポート方法から見てみます。

<script src="./jquery.js" type="text/javascript"></script>
<script src="./jquery.dimensions.js" type="text/javascript"></script>
<script src="./ui.mouse.js" type="text/javascript"></script>
<script src="./ui.sortable.js" type="text/javascript"></script>

これらの4つのライブラリを読むことで準備が完了します。では、また今回も簡単なサンプルを作ってみましょう。

リスト項目をドラッグして上下の項目へドロップしてみてください。順番が変わります。

アイテム 1
アイテム 2
- アイテム 2-1
- アイテム 2-2
- アイテム 2-3
アイテム 3
アイテム 4
- アイテム 4-1
- アイテム 4-2
アイテム 5
アイテム 6
アイテム 7

ソースは次の通り。

<script type="text/javascript">
jQuery.noConflict(); //他のライブラリとの衝突を回避します

jQuery(function($) {
  $("#myList").sortable({ items: "li" });
});
</script>

<style>#myList li{cursor: move}</style>

<ul id="myList">
	<li>アイテム 1</li>
	<li>アイテム 2
		<ul>
			<li>アイテム 2-1</li>
			<li>アイテム 2-2</li>
			<li>アイテム 2-3</li>
		</ul>
	</li>
	<li>アイテム 3</li>
	<li>アイテム 4
		<ul>
			<li>アイテム 4-1</li>
			<li>アイテム 4-2</li>
		</ul>
	</li>
	<li>アイテム 5</li>
	<li>アイテム 6</li>
	<li>アイテム 7</li>
</ul>

これだけです。今回も簡単ですね。

このソースでソーティング処理を指示しているのは、$("#myList").sortable()です。ここでは、その引数でソーティング対象のセレクタitemを{ items: "li" }とすることで #myLis内のすべてのliをソートドラッグ対象にしています。

この引数のitemsを省略すると、このUIコード内部では、自動的に"#myList > li" というセレクタが生成されて、それによって、#myList 直下のLI要素を検索し、ソートドラッグの対象とします。

したがって、ユーザーが指定するのは、デフォルトでは、UL要素のID名(ここでは#myList) とLI要素だけで良いことになります。

他のコードとの衝突を避けるためのjQuery.noConflict()と、jQuery(function($) {...})関数については、前々回までに何度も解説してきましたので省略します。さて、このドロップ用のメソッドにも前回のドラッグや他のプラグイン同様に、いくつかのプロパティを設定できるようになっています。たとえば次のようなものです。

  $('#myDrog').droppable({
    //#myDrog内にあるソーティング対象のセレクタ文字列(省略時はli)
    items       : 'target', 
    //hoverしたときに適用するクラス名
    hoverClass  : 'hvrclass', 
    //ソーティング開始時に呼ばれる関数
    start       : function(){},
    //ソーティング停止時に呼ばれる関数
    stop        : function(){},
    //ソーティング中に発生する関数
    sort        : function(){} 
  })

では、次ページで、Sortablesの簡単なサンプルを試してみます。