script.aculo.us の Sortable は要素の更新時に再度設定する

以下のような html があったとします。

<ul id="sortable">
  <li>あべし</li>
  <li>ひでぶ</li>
</ul>

ここで sortable と名付けた ul 内の要素をドラッグ＆ドロップで動かしたい場合に script.aculo.us の Sortable を使います。記述は省きますが prototype.js 等の必要なライブラリはロード済とします。

window.onload = function() {
  Sortable.create('sortable');
}

しかし、ここに後から要素を追加すると、そこは動かす事ができません。

window.onload = function() {
  Sortable.create('sortable');
  // このタグは動かない
  new Insertion.Bottom('sortable', '<li>たわば</li>');
}

この場合、改めて Sortable.create() を使う事で、後から追加された要素も動くようになります。

window.onload = function() {
  Sortable.create('sortable');
  new Insertion.Bottom('sortable', '<li>たわば</li>');
  // 後から追加した要素もこれで動く
  Sortable.create('sortable');
}

create メソッドは内部で Sortable.destroy を呼んでいるので、更新時に特に以前の情報を気にする必要はありません。実際のコードでは、以下のような形になるでしょう。

<ul id="sortable">
  <li>あべし</li>
  <li>ひでぶ</li>
</ul>

<input type="button" value="たわば" onclick="addTawaba();" />

window.onload = function() {
  Sortable.create('sortable');
}

function addTawaba() {
  new Insertion.Bottom('sortable', '<li>たわば</li>');
  Sortable.create('sortable');
}