jQuery利用例：位置座標の取得・制御

サンプルはこちら。
http://jsdo.it/goto_jp/iCII

普通のWebサイト制作ではあまりサンプルのように動かす機会は少ないですが、画面上のポップアップ表示やモーダルウィンドウの類を操作する時には位置座標を操作することもあります。

JavaScript

$(".box").position();

position() で対象の位置座標を参照できます。

position() では top と left の値が両方取れるので、実際に引き出して利用する時は下記のように使います。

$(function(){
    var pos = $(".box").position(); //変数posにboxの座標を取得
    alert(pos.top);  //posの中のtopをアラート表示
    alert(pos.left);  //posの中のleftをアラート表示
});

ここで長めですがサンプルのコードは下記になります。

$(function(){

    //boxの位置を表示するための関数getPos
    function getPos() {
        var pos = $(".box").position();  //boxのpositionを取得
        $(".boxTop").text(pos.top);  //boxTopにtopを表示
        $(".boxLeft").text(pos.left);  /boxLeftにleftを表示
    }

    //とりあえずgetPosを実行して表示
    getPos();    

    //boxを左に移動
    $(".moveXm").click(function(){
        $(".box").css("left",$(".box").position().left - 10);
        getPos();
    });

    //boxを右に移動
    $(".moveXp").click(function(){
        $(".box").css("left",$(".box").position().left + 10);
        getPos();
    });

    //boxを上に移動
    $(".moveYm").click(function(){
        $(".box").css("top",$(".box").position().top - 10);
        getPos();
    });

    //boxを下に移動
    $(".moveYp").click(function(){
        $(".box").css("top",$(".box").position().top + 10);
        getPos();
    });

});

サンプルでは box を移動できるようにしており、ボタンを押すたびに box の座標を表示させています。

この表示する座標の更新は各ボタンで動作させるため、最初に「getPos」という関数を作っており、各ボタンのクリック時に実行しています。

position() は座標を参照するためだけの関数のため、実際に座標を変えるにはCSSの top と left を操作することになります。topとleftに現在座標の-10や+10をすることでboxを移動させています。