| 解 説 |
フローティングフレームをドラッグして動かせるようにするにはフローティングフレームに名前(id)を付けておきます。フローティングフレームをドラッグするために画像のタブ（つまむ部分）を用意し、実際には画像をドラッグした際に、フローティングフレームの位置を画像の下に表示します。これでフローティングフレームの表示位置をドラッグして移動できるようになります。
|
| コード |
<![CDATA[
<html>
<head>
<title>フローティングフレームをドラッグして動かせるようにする</title>
<script language="JavaScript"><!--
flag = false;
window.document.onmousemove = dragImg;
window.document.onmouseup = dragOff;
function dragOn(n)
{
flag = true;
iName = n;
offx = event.x - document.images[iName].style.pixelLeft;
offy = event.y - document.images[iName].style.pixelTop;
}
function dragOff(){ flag = false; }
function dragImg()
{
if (!flag) return;
document.images[iName].style.pixelTop = event.y - offy;
document.images[iName].style.pixelLeft = event.x - offx;
document.all["myIFRAME"].style.pixelTop = document.images[iName].style.pixelTop + 24;
document.all["myIFRAME"].style.pixelLeft= document.images[iName].style.pixelLeft;
return false;
}
// --></script>
</head>
<body>
<img src="image.gif" name="myTAB" style="position:absolute;left:0px;top:80px;" onMousedown="dragOn('myTAB')">
<iframe src="cont.html" id="myIFRAME" style="position:absolute;left:0px;top:104px;"></iframe>
</body>
</html>
]]>
|
|
■サンプルスクリプトを実行する >>実行
■各ブラウザでの動作結果を見る >>View! |
フローティングフレームをドラッグして動かせるようにする