Web2.0note

昨日からscript.aculo.usのライブラリの使い方を紹介しています。
今回はSortableです。リストに表示されている項目をマウスで入れ替える機能です。最下部のサンプルをダウンロードして試してください。

利用手順は以下のとおりです。

1. script.aculo.usからライブラリを取得する。
2. 1のライブラリに含まれている prototype.js, effects.js, dragdrop.jsをHTMLに読み込む。
3. 並び替えを行う要素を囲む要素をdivタグやulタグ等で囲む。この要素にはidを設定する。
4. 以下のようにライブラリを呼び出す。
   Sortable.create('id', {});
   • 'id'は、3.のidです。
   • {}はオプションの指定です。イベントハンドラの登録等に使えます。使用方法は下記サンプルを参照してください。

   以下にサンプルプログラムを載せておきます。最下部のリンクからダウンロードできます。

   ＜html＞
   ＜head＞
   ＜script src="prototype.js"＞＜/script＞
   ＜script src="effects.js"＞＜/script＞
   ＜script src="dragdrop.js"＞＜/script＞
   ＜script＞
   function change1() {
   　　var list = [];
   　　$A($('sortable').childNodes).each(function(e) {
   　　　　list.push(e.getAttribute('id'));
   　　});
   　　$('sequence').innerHTML = list.join(' ');
   }
   function update1() {
   　　alert('update1');
   }
   function init() {
   　　Sortable.create('sortable', {onUpdate:update1, onChange:change1});
   }
   ＜/script＞
   ＜/head＞
   ＜body onload="init();"＞
   
   ＜ul id="sortable"＞
   ＜li id="item_1"＞Item 1＜/li＞
   ＜li id="item_2"＞Item 2＜/li＞
   ＜li id="item_3"＞Item 3＜/li＞
   ＜li id="item_4"＞Item 4＜/li＞
   ＜li id="item_5"＞Item 5＜/li＞
   ＜/ul＞
   
   ＜div id="sequence"＞＜/div＞
   
   ＜/body＞
   ＜/html＞

   並び替えを行うだけなら、並び替えの対象(上記のサンプルの＜li＞タグ)にidを設定する 必要は無いのですが、イベント処理を行う場合はidが必要になります。
   イベントには以下の2種類があります。

   onChange

   ドラッグ中に順序が変更になった時点で発生

   onUpdate

   ドラッグ完了時点で、ドラッグ前と順序が変わっている場合に発生。

   
   onChangeについては任意のidでよいのですが、 onUpdateについてはxxx_n (xxx:名前、n:数字)である必要があります。 例えば、item_1 のような形式です。
   ご注意下さい。

   サンプルをこちらに置いておきます。 zipファイルなので、拡張子をzipに修正して展開して下さい。

   script.aculo.usのSortableのサンプル

   http://blog61.fc2.com/w/web2note/file/scriptaculous_sortable.mp3