bytefx:位置を取得する

 bytefxでオブジェクトの位置を取得するにはbytefx.$positionを使います。bytefx.$positionの書式は以下のようになります。

bytefx.$position(対象オブジェクト)

 対象オブジェクトはdocument.getElementById()などで指定します。戻り値はオブジェクトでx, yプロパティに座標が返されます。
以下のサンプルでは赤いボックスをドラッグした後に、ボタンをクリックするとアラートダイアログにオブジェクトの座標値を表示します。(サンプルを実行する

<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<title>bytefx : 座標を取得</title>
<link rel="stylesheet" href="main.css" type="text/css" media="all">
<script type="text/javascript" src="bytefx_OS.js"></script>
<script type="text/javascript"><!--
window.onload = function()
{
bytefx.drag(document.getElementById("box"));
}
function displayPos()
{
var pos = bytefx.$position(document.getElementById("box"));
alert(pos.x+", "+pos.y);
}
// --></script>
</head>
<body>
<h1>bytefx : 座標を取得</h1>
<form>
<input type="button" value="座標を表示" onClick="displayPos()">
</form>
<div id="box">ここをドラッグすることができます</div>
</body>
</html>


[エフェクトの目次へ]
[「Ajaxを勉強しよう」の目次へ]

(2006.10.11)