YUIでクリックした場所へ移動

YUIでクリックした場所へ移動

---

1: クリックした場所を取得する
2: クリックした場所へ移動する

( 注意 : このページでは、クリックすると、クリックされた位置を示すダイアログが表示されます。)

今回は、YAHOO.util.Eventのメソッドを利用して、カーソルでクリックした場所を取得し、そこへYAHOO.util.Motionにより移動してみます。

クリックした場所を取得する

YAHOO.util.Eventには、カーソルでクリックした場所を、クロスブラウザで取得してくれるメソッド getPageXとgetPageY、getXYがあり、次のように記述します。

	getPageX(event) //left位置 を返す
	getPageY(event) //top位置 を返す
	getXY(event)    //位置配列 [left,top] を返す

getPageXは、IEならpageXにscrollLeftを足したページ内の位置を返し、それ以外のブラウザではpageX、pageXが無ければclientXを返します。 getPageYは同様に、scrollTopとclientYをクロスブラウザに処理します。そして、getXYは、そのpageXとpageYを配列の形式で返します。

簡単にいうと、たとえば、スクロールした先の位置でもスクロール分を加算した値で返します。つまり、これで取得したXとYは、そのまま CSSのleftとtopの値として利用することができるわけです。

それでは、試しに、カーソルでクリックした場所を取得してみます。

どこでも好きな場所をクリックしてください。クリックされた場所のgetPageXとgetPageYとgetXYの値が、ダイアログで表示されます。

このコードは次の通りです。

<script type="text/javascript"
        src="../../build/yahoo/yahoo-min.js"></script>
<script type="text/javascript" 
        src="../../build/animation/animation-min.js"></script>
<script type="text/javascript" 
        src="../../build/event/event-min.js"></script>
<script type="text/javascript" 
        src="../../build/dom/dom-min.js"></script>

<script type="text/javascript">

//ネームスペースを作成
YAHOO.namespace('myTest20070710');

YAHOO.myTest20070710.chkXY = function (ev){ 

    var E  = YAHOO.util.Event; //YAHOO.util.Eventショートカット
    var x  = E.getPageX(ev);
    var y  = E.getPageY(ev);
    var xy = E.getXY(ev);
    
    alert(
      'getPageXは、'+x  +'?n'+
      'getPageYは、'+y  +'?n'+
      'getXYは、'+xy  +'?n'
    );
};


//クリックしたらYAHOO.myTest20070710.chkXYを実行
YAHOO.util.Event.addListener(document,'click',YAHOO.myTest20070710.chkXY);

</script>

それでは、次にこれを利用して、クリックした場所へDOM要素が移動するアニメーションを作ってみます。