まだまだバグが多いのね。

最近は、ずっとJavaScriptを書いていて、世間ではjQueryが注目されている中、私は未だprototype.jsとscript.aculo.usを使っている。今の仕事では結構、面倒くさいこといろいろやっているんだけど、prototype.jsやscript.aculo.usってまだまだバグが多いのね。というか、script.aculo.usの中に入っているprototype.jsが古いっていうのもあるんだろうけど、悩ましいなぁ。ここではまると結局、中のソースを見たりしないといけないので、時間がかかってしょうがない。

で、はまったついでにメモとして書いておく。

1. Insertion.Afterでtableのtrを複数入れようとしたときに順番が逆になる。

えと、今作っているところの一つはtd要素にrowspanとか使っているので、複数のtr要素を一つの行として扱わないといけないところがあった。
そこで、rowspan分挿入しようとしたのだが、順番が逆になって入ってしまう。。。前回は、結構バグに悩んだけど、今回からはもう既存のバグをまず探す。そして、解決されていればいつ対応されたのかバージョンを探る。で、今回見つけたのは、これ。

Insertion.After inserts table rows the wrong way round in IE

Prototype.jsでは、1.5.2でFixedらしい。ということは、script.aculo.usと同時に使えないね。アプリ側でPrototype.Versionを見て、1.5.2より下の場合のみ拡張するコードを書いたよ。

2. draggableな要素がoverflowのhidden, scroll, auto(たぶん)のときには、そのoverflowを指定してある要素の外では見えなくなっちゃう。

えと、これはかなりはまった。。。。orz….divでoverflow:scrollな要素が二つあって、そこの間をドラッグドロップをしようとしていたのだけど、移動先のdivに入るとドラッグレイヤーの下に入ったかのように見えて、消えちゃうの。で、いろいろ探した結果、結構ホットなバグみたい。IE6ではちゃんと動くけど、mozillaとIE7ではダメというちょっと不思議なバグ。つーか、IE6の動作がそもそもいかんのかな。。。
draggables are stuck in a div with overflow:scroll. A way to move them to upmost dom level needed

Dragging an element outside a overflow:auto container

Drag draggables outside an overflow:auto div to an external droppable container

で、解決方法は結構大変。えと、問題なのは、
draggables are stuck in a div with overflow:scroll. A way to move them to upmost dom level needed

I discussed this with Thomas some time ago, and the problem is that the element we move (be it in ghosting mode or not) usually must remain at the same DOM level because otherwise, styles might get lost. I’m working on a solution right now, too, it will involve a new option you can use to assign a class name to the element while it’s being dragged. If this class name is supplied, the element will be attached to the body. Let’s see if this works, I’ll provide the patch as soon as it is ready

ということなのだ。つまり、z-indexを付けようがどうだろうが、ダメなものはダメなのだ。解決方法としては、body要素の下にdraggableな要素をappendChildしてやればいいのだが、それをするとstyleが無くなる可能性ががあるというわけ。もちろん位置も合わせないといけないしね。つまり、ドラッグする要素のstyleがそれに付けられているclassやidなどで完結していればいいのだが、そうでないときは、いきなりbody要素の下に付けてもさぁ、困ったな、といったことが起きるのだ。li要素とか。。。で、未だ正しい解決方法は出てきていない。まぁ、こういうところがハックのしがいがあるんだよね。

今回の私が使用したかったところは、div要素で完結していたので、width指定とかもしておけば、body要素の下に置いても大丈夫だった。後は、Positionの位置を合わせるだけ。
Draggables.addObserverのonStartとonEndを使用して、要素をbody直下に変えたり、戻したりしたらいけた。位置がずれるところはちょっと泥臭いことしたけど、もう少しキレイに書けたらここに載せるかもしれん。

しかし、
Super.mario.bros
辺とか見ると自分はまだまだっす。。。先は長いなー。