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システム開発・ネットワーク構築会社 コネクティボへ