DOM Using getXY

Ajax YUI DOM

このサンプルは、赤い矩形のX座標（left）とY座標（right）をとるところで、getXYを使い、小さい青い矩形の座標をそれにセットする。このセットのときにsetXYを利用する。
このイベントハンドラーは、「実行」ボタンのクリックイベントに仕込んでおく。

サンプルコードは以下。

<HTML>
<HEAD>
<META http-equiv="Content-Type" content="text/html; charset=UTF-8">
<META http-equiv="Content-Style-Type" content="text/css">
<TITLE>Ajax_Sampling</TITLE>
<!-- #style で　id=foo,barの全ての要素に適用する。 -->
<style type="text/css"> 
#foo {
    background-color:#00f;
    height:10px;
    width:10px;
}
#bar {
    background-color:#f00;
    height:100px;
    width:100px;
    margin:0 100px 1em;
}
</style>

<!-- 読み込むjs --> 
<script type="text/javascript" src="scripts/yui/yahoo/yahoo-min.js" >
</script> 
<script type="text/javascript" src="scripts/yui/dom/dom-min.js" >
</script> 
<script type="text/javascript" src="scripts/yui/event/event-min.js" >
</script> 

<script type="text/javascript">

init = function() {

	var move = function() {
　　　　　　//赤い矩形（id=bar)の座標を取得。
	    var xy = YAHOO.util.Dom.getXY('bar');
　　　　　　//青い矩形（id=foo)の座標に取得した座標をセット。
	    YAHOO.util.Dom.setXY('foo', xy);
	};

    //YAHOO.util.Event.on はaddListnerのエイリアス 
    //（EventのAPIドキュメントより。）
    //id=demo-run 要素にclick eventで発火するmoveを仕込む。
	YAHOO.util.Event.on('demo-run', 'click', move);

}
</script>
</HEAD>

<BODY onload=init()>

<div id="foo"></div>
<div id="bar"></div>
<button id="demo-run">実行</button>

</BODY>
</HTML>

サンプル画面（実行後）は以下のようになる。