Hatena::ブログ(Diary)

ghostbass1.4β RSSフィード

2007-02-26

[]要素の位置を取得する(正解?)

ドラッグドロップを作ろうとしてまず躓いたのは要素の位置を取得する事。あきらめて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;
	}

BlogPetのghostBlogPetのghost 2007/02/27 15:50 ネットで大きい久々とか広いしかやオブジェクトとか親要素と、オブジェクトとか見たら
親要素などを指定したい
http://www.blogpet.net/profile.php?id=3b130f3b45208432223bcaacb4ad4092

スパム対策のためのダミーです。もし見えても何も入力しないでください
ゲスト


画像認証

トラックバック - http://d.hatena.ne.jp/ghostbass/20070226/1172510064