ywork2020.com

Title

位置指定親要素からの相対位置を取得する

目次 (INDEX)

positionとは

ここで説明する position とは次の語句からなるjQueryのメソッドです。
position
読み: ポジション
意味: 立場、位置、場所

目次に戻る

positionメソッドの概要

このメソッドは、呼び出し元の要素群の中から最初の要素のポジションを取得することができます。

メソッドの戻り値は、Object型であり、このオブジェクトは、left と top のプロパティを有しています。 なお、このプロパティから取得できる値は位置指定された親要素からの相対座標を表すピクセル実数です。

前述していますが、親要素は位置指定要素であることが必要です。

このメソッドは引数を受け付けませので、ポジションの設定はできず、取得のみが可能です。 ポジションの設定を行う場合は、 offset() を使用してください。

目次に戻る

構文

サンプルを見る前に構文を確認しておきます。 このメソッドは引数を受け付けません。 

var obj = $(Selector).position();

座標値の取得には下記ように、戻り値として得たオブジェクトの left 、または top プロパティから得ることができます。 

var numLeft = obj.left;
var numTop = obj.top;

目次に戻る

サンプルコードと実行結果

ここでは、div要素を使って親要素と子要素を配置したものを題材にします。
親要素は予め CSS の position を使って位置指定要素に設定しています。 この要素をクリックするとマウスの動きに連動して、要素のオフセットポジションが設定され、座標の取得と表示も行います。 また、ダブルクリックすることで移動を解除します。

サンプルコード: CSS 
<style>
	#idParent{
		position: relative;
		background-color: ##lightblue;
		border: thin solid currentColor;
		height: 300px;
		width: 300px;
	}
	#idChild{
		background-color: ##lightpink;
		border: thin solid currentColor;
		padding: 9px;
		height: 131px;
		width: 131px;
	}
</style>
  • 03: position: (位置指定要素に設定しています。 relative は相対位置指定要素となります。)
サンプルコード: HTML 
<head>
	<style>...</style>
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
	<div id="idParent">
		<div id="idChild">child</div>
	</div>
	<script>...</script>
</body>
  • 06-08: div (識別子に idParent を持つ親要素です。位置指定要素です。)
  • 07: div (識別子に idChild を持つ子要素です。この要素のポジション値の取得を行います。)
サンプルコード: script 
<script>
	$("#idChild").click(function(){
		$(this).css("background-color", "##lightcoral");
		$(document).mousemove(function(event){
			$("#idChild").offset({
				"left":event.pageX - ($("#idChild").outerWidth()/2), 
				"top":event.pageY - ($("#idChild").outerHeight()/2)
			});
			$("#idChild").html(
				"<div>top : " + Math.floor($("#idChild").position().top) + "</div>" +
				"<div>left : " + Math.floor($("#idChild").position().left) + "</div>"
			);
		});
	});
	$("#idChild").dblclick(function(){
		$(this).css("background-color", "##lightpink");
		$(document).off();
	});
</script>
  • 10: $("#idChild").position().top (topプロパティを使って垂直軸の親要素からの相対座標を取得しています。)
  • 11: $("#idChild").position().left (leftプロパティを使って水平軸の親要素からの相対座標を取得しています。)
    • ※ offset() に関してはリンク先のページを参照してください。
実行結果:
[補足]
サンプル要素の左上の赤い点の位置が、この要素の座標になります。 サンプル要素をクリックすると要素がマウスの移動と連動します。 なお、タッチスクリーンで実行した場合にはタップの位置に要素は移動します。 移動を解除するにはサンプル要素をダブルクリック(ダブルタップ)してください。
child

目次に戻る