要素の位置を取得する(正解？)

ドラッグドロップを作ろうとしてまず躓いたのは要素の位置を取得する事。あきらめてYUIなりなんなりを使えばいい・・・が、実はYUIもドラッグするオブジェクトの親要素に枠線があったりoverflowが指定されていたりするとずれる。噂ではprotoype.jsでもずれる。久々に頭を使って書いてみた。とりあえずfirefoxではいけるかも。IE6は今見たらoverflowでも位置をずらさないようだ。したがって修正が必要。hiddenしかテストしていないからnoneとかautoとかscrollではわからない。

ご覧の通りYAHOO.util.Dom.getStyleを使用。
詳細はYUIを参照。

	var getStyle = YAHOO.util.Dom.getStyle;
	
	function getElementOffset( e ,base){
		if(!base) base = document.body;
		var p  = {x:0,y:0};

	    p.x = e.offsetLeft;
	    p.y = e.offsetTop;

		var prnt = e.offsetParent;
		var overflow = getStyle(prnt,"overflow") 
			if(overflow){
				if(overflow != "visible"){
					p.x += PixNum( getStyle(prnt,"borderLeftWidth") ) ;
					p.y += PixNum( getStyle(prnt,"borderTopWidth") )  ;
			$("msg").innerHTML = p.x 
							 + ":" + p.y
				}
			}
		while((prnt != null)  ){
			p.x += PixNum( prnt.offsetLeft);
			p.y += PixNum(prnt.offsetTop ) ;

			p.x += PixNum( getStyle(prnt,"borderLeftWidth") ) ;
			p.y += PixNum( getStyle(prnt,"borderTopWidth") )  ;
			overflow = getStyle(prnt.offsetParent,"overflow") 
			if(overflow){
				if(overflow != "visible"){
					p.x += PixNum( getStyle(prnt.offsetParent,"borderLeftWidth") ) ;
					p.y += PixNum( getStyle(prnt.offsetParent,"borderTopWidth") )  ;
			$("msg").innerHTML = p.x 
							 + ":" + p.y
				}
			}
			if(prnt == base) break;

			prnt = prnt.offsetParent;
		}
		return p;
	}

	function PixNum(sz){
		if(sz == null) return 0;
		if(sz == "") return 0;
		var s = (sz + "").replace(/\D^-/g,"");
		var n = parseInt(s) + 0;
		return n;
	}