要素の座標

javascript air

AIRの開発にて、ドラッグアンドドロップ後の要素の座標を取得したいと思いました。

その時のメモです。

簡単に、座標を取得するために、 getBoundingClientRect()を使いました。

var elm = document.getElementById('適当なID');
// 絶対座標の取得
var position = elm.getBoundingClientRect();

// X、Y座標を取得する
var left = Math.round(window.scrollX+position.left);
var top = Math.round(window.scrollY+position.top);

上記ソースによって、firefox3系では、動作できました。

そして、本題の AIR にて確認してみました。
（Adobe AIR 1.5.1）
すると、動きません。。
ということで、別の方法を考えなければならなくなりました。

prototype.js の cumulativeOffset() を使うことにしました。

var elm = document.getElementById('適当なID');
// 絶対座標の取得
var position = Position.cumulativeOffset(elm); 

// X、Y座標を取得する
var left = Math.round(window.scrollX+position.left);
var top = Math.round(window.scrollY+position.top);

この実装に変更しました。
上記ソースによって、firefox3系では、動作できました。

そして、本題の AIR にて動作確認できました。

しかし、一つ問題が。。
AIRの場合のみなんですが、 valign="bottom"とした箇所の座標を求めると、取得するY座標が正しい値（firefoxで実行したときの座標）になりません。

<td valign="bottom">
  <div id="適当なID"></div>
</td>

上記のようにあるdiv の座標がうまくとれません。
これは、offsetTop の値が air と firefox で違うからでした。
というか、これは AIR のバグかな。。

せっかく、AIR を使うことによりクロスブラウジングから開放されると思ったのに・・・

ということで、valign="bottom" を使用しないレイアウトにして対応したいと思います。
（ブラウザによる分岐処理をかましてもできますが、、さすがに辞めておきます）