ドラッグ処理を行う

<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<title>Sample</title>
<link rel="stylesheet" href="main.css" type="text/css" media="all">
<script type="text/javascript" src="prototype.js"></script>
<script type="text/javascript"><!--
dragObj = new Object();
dragObj.dragFlag = false; // ドラッグ中かどうかのフラグ変数
dragObj.targetObj = null // ドラッグ対象オブジェクト情報
// ドラッグ開始処理
dragObj.dragStart = function (event)
{
dragObj.dragFlag = true;
dragObj.targetObj = $("mainContents"); // サンプルなので特定のオブジェクトのみ
dragObj.offsetX = mouseX - parseInt(dragObj.targetObj.style.left);
dragObj.offsetY = mouseY - parseInt(dragObj.targetObj.style.top);
return false;
}
dragObj.dragEnd = function() // ドラッグ終了処理

{
dragObj.dragFlag = false;
}
dragObj.dragProc = function(event) // ドラッグ中の処理
{
mouseX = Event.pointerX(event);
mouseY = Event.pointerY(event);
if (!dragObj.dragFlag) return;
dragObj.targetObj.style.left = mouseX - dragObj.offsetX;
dragObj.targetObj.style.top = mouseY - dragObj.offsetY;
return false;
}
window.onload = function() // イベントハンドラなどを設定
{
eleName = "mainContents";
$(eleName).onmousedown = dragObj.dragStart;
$(eleName).onmouseup = dragObj.dragEnd;
$(eleName).style.left = "60px";
$(eleName).style.top = "50px";
Event.observe(window.document, "mousemove", dragObj.dragProc, false);
}
// --></script>
</head>
<body>
<h1>ドラッグ処理</h1>
<div id="mainContents">
ここをドラッグできます。
</div>
</body>
</html>

・サンプルを実行する
Ajax逆引きクイックリファレンス　説明などは本書を参考にしてください。