ドラッグ中に座標を表示する

　yuiではドラッグの際に以下のイベントが発生します。
ここではドラッグ中にドラッグされているオブジェクトの座標値を表示させてみます。ドラッグ中にオブジェクトが移動するとonDragイベントが発生しますので、このイベントが発生したら座標値を取得してページ上に表示します。
ドラッグするオブジェクトを指定／生成したらイベントハンドラを設定します。イベントハンドラ内ではYAHOO.util.Dom.getXY()を使ってオブジェクトの座標値を取得します。結果は配列で最初の要素がX座標、次の要素がY座標になります。
取得した座標値をページ上にあるオブジェクトのinnerHTMLに書き込みを行えばドラッグ中に座標値を表示させることができます。（サンプルを実行する）

<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<title>ドラッグ時に座標を表示する</title>
<link rel="stylesheet" href="css/main.css" type="text/css" media="all">
<script src="js/yahoo.js" type="text/javascript"></script>
<script src="js/event.js" type="text/javascript"></script>
<script src="js/dom.js" type="text/javascript"></script>
<script src="js/dragdrop.js" type="text/javascript"></script>
<script type="text/javascript"><!--
window.onload = function ()
{
dragObj1 = new YAHOO.util.DD("myBox");
dragObj1.onDrag = function() {
var pos = YAHOO.util.Dom.getXY("myBox");
var x = pos[0];
var y = pos[1];
document.getElementById("result").innerHTML = x+","+y;
}
}
// --></script>
</head>
<body>
<h1>yuiでドラッグ時に座標を表示する</h1>
<div id="myBox">ここのボックスをドラッグすると座標が表示されます。</div>
<div id="result"></div>
</body>
</html>

[目次へ]

(2006.5.23)