bytefxでドラッグ処理を行うにはbytefx.drag()を使います。bytefx.dragの書式は以下のようになります。
bytefx.fade(対象オブジェクト, 開始時コールバック処理, 終了時コールバック処理)
対象オブジェクトはdocument.getElementById()などで指定します。
以下のサンプルでは赤いボックスをドラッグすることができます。（サンプルを
実行する）
<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"));
}
// --></script>
</head>
<body>
<h1>bytefx : ドラッグ処理</h1>
<div id="box">bytefx : を使ったドラッグサンプル。ここをドラッグすることができます</div>
</body>
</html>
ドラッグ処理が開始された時と終了した時に処理を実行させることもできます。この場合、開始時の処理は2番目のパラメータ、終了時の処理は3番目のパラメータに指定します。以下のサンプルではドラッグ開始時にstartMsg関数、終了時にendMsg関数を呼び出すようにしています。（サンプルを
実行する）
<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"),
startMsg, endMsg);
}
function startMsg()
{
document.getElementById("result").innerHTML += "ドラッグ開始<br>";
}
function endMsg()
{
document.getElementById("result").innerHTML += "ドラッグ終了<br>";
}
// --></script>
</head>
<body>
<h1>bytefx : ドラッグ処理</h1>
<div id="result"></div>
<div id="box">bytefx : を使ったドラッグサンプル。ここをドラッグすることができます</div>
</body>
</html>
[
エフェクトの目次へ]
[
「Ajaxを勉強しよう」の目次へ]
(2006.10.4)