script.aculo.us(Ajaxライブラリ) - Sortable.createのonUpdateについて
2007.05.07 Author: えす
script.aculo.us(Ajaxライブラリ)のSortable.createでonUpdateを使った際に、うまく動作しませんでした。
Sotable.createは、リストなどの要素をドラッグ&ドロップで並び替えできます。
調べた結果、Sotable.createを使う際、並び替えたい要素にidをふりますが、idのつけ方によってonUpdateが反応しない場合があるようです。
下記のソースは動作しない場合です。
<div id="list"> <div id="item1">a</div> <div id="item2">b</div> <div id="item3">c</div> </div> <script type="text/javascript"> <!-- Sortable.create("list", {tag:"div", onUpdate:function(){alert("並び替えました")} }); //--> </script>
下記のソースは動作する場合です。
<div id="list"> <div id="item_1">a</div> <div id="item_2">b</div> <div id="item_3">c</div> </div> <script type="text/javascript"> <!-- Sortable.create("list", {tag:"div", onUpdate:function(){alert("並び替えました")} }); //--> </script>
2つのソースの違いは、並び替える要素のid名です。
動作しない場合は、id名が『item1』となっていますが、動作する場合はid名が『item_1』となっています。
ライブラリ内部の話になりますが、順番を変更したか判断するのに、配列にアンダーバー以降の値を順に入れ、その順番が変わっていれば変更されたと認識しているようです。
また、id名からアンダーバー以降を取得する際は、正規表現を使っています。
正規表現は【/^[^_]*_(.*)$/】となっています。
当然、id名が『item1』ではアンダーバー以降を取得できないため、配列には全てnullが入ります。
そのため、並び順を変更しても値が同じため、onUpdateが実行されなかったようです。
別の回避方法としては、Srtable.createのオプションでidのフォーマットを正規表現で指定する方法があります。
<script type="text/javascript"> <!-- Sortable.create("list", {tag:"div", onUpdate:function(){alert("並び替えました")}, format:/^item([0-9]+)$/ }); //--> </script>
これでid名が『item1』でも動作します。
※ onChangeの場合、id名は『id名_ユニークな値』でなくても動作します。
名古屋のWebシステム開発・ネットワーク構築会社 コネクティボへ