数式宇宙(仮) - 読み書きプログラミング

ブラウザ上で数式が踊り始めました。

マウスで記号をぶつけると、「評価」反応を起こして、式が評価式に変わります。(ウソです。まだできてません。)

プラットフォームには、scriptaculous.jsを利用しました。

<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<title>Expression Universe</title>

<script type="text/x-mathjax-config">
  MathJax.Hub.Config({ tex2jax: { inlineMath: [['$','$'], ["\\(","\\)"]] } });
</script>
<script type="text/javascript" src="http://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS_HTML"></script>
<meta http-equiv="X-UA-Compatible" CONTENT="IE=EmulateIE7" />

<script type="text/javascript" src="prototype.js"></script>
<script type="text/javascript" src="scriptaculous/scriptaculous.js"></script>
<script type="text/javascript">
window.onload = function() {
  maths = document.getElementsByClassName("math");
  for (i = 0; i < maths.length; i++) {
    new Draggable(maths[i].id);
  }
}
</script>
</head>
<body>
<div class="math" id="int">$$\int$$</div>
<div class="math" id="e">$$e$$</div>
<div class="math" id="i">$$i$$</div>
<div class="math" id="x">$$x$$</div>
<div class="math" id="dx">$$dx$$</div>
</body>
</html>

以下、つまずいた/つまずいている点。

for (e in maths)なんてかっこいい記述はできません。

都市伝説です。
(追記) 言語仕様はfor (i in maths)という意味でした。変数には要素ではなくプロパティ名/インデックスが代入されます。

spanタグでは動きません。

インラインだから当たり前でしたか。

iPadでは動きません。

マウスハンドラではリスナーがコールされず、デフォルトのタッチ動作(拡大縮小、縦スクロール)してしまいます。
現在、iPhone/iPad対応JavaScriptライブラリの存在を調査中です。

参考文献

script.aculo.us