MoveB

編集：2023.07.08 by T.A.

BODY の mosemove イベントの利用によるオブジェクトの移動です。

要素の class 属性に「Move」を含めているものだけ移動可能になります。

その要素のドラッグ操作で移動できます。マウスを放すと移動終了となります。

その要素のスタイルの position は、予め「absolute」「relative」「fixed」「sticky」の何れかを指定しておいてください。

組み込み方

HEAD内で「MoveB.js」を読み込ませてください。

移動させたい要素の class 属性に「Move」を含めてください。

サンプル

当文書の HEAD 内の CSS に以下のように指定しています…

position の指定が必須で、有効なのは「absolute」「relative」「fixed」「sticky」。

position の指定は、HEAD 内の STYLE で、または要素に直接（インライン スタイルート）指定してください。

position:absolute：

開始<IMG class=Move style="position:absolute" src="Img/FC.gif">終了

position:absolute： position:relative の DIV ボックス内に配置。

<DIV style="position:relative; width:200px; height:150px; border:1px solid black">
<IMG class=Move style="position:absolute" src="Img/FC.gif">
</DIV>

position:relative：

<IMG class=Move style="position:relative" src="Img/FC.gif">

position:relative： 全てclassで指定

<IMG class="Move PosRel" src="Img/FC.gif">

position:relative： 内容はタグを含めることが可能です。ネストは 10 まで。

<SPAN class=Move style="position:relative">[SPAN。IMG:<IMG src="Img/FC.gif">
<TABLE>
 <TR><TD>TABLE内のTD要素
</TABLE>
]</SPAN>

position:fixed：

<SPAN class=Move style="position:fixed; left:30px; top:300px;">fixed：<IMG src="Img/FC.gif"></SPAN>

position:sticky： BODY 直下で、IMG 要素のみ。

<IMG class=Move style="position:sticky" src="Img/FC.gif">

position:sticky： BODY 直下。SPAN ボックスに class=Move を指定して、内容に IMG 要素を含むと怪しい。

<SPAN class=Move style="position:sticky">[SPAN sticky：<IMG src="Img/FC.gif"><B>[B要素]</B>]</SPAN>

position:sticky： BODY 直下。DIV ボックスに class=Move を指定して、内容に TABLE と IMG を含む、※IMG、TABLE 要素を含むと怪しい。

<DIV class=Move style="position:sticky; width:300px">[DIV sticky：<IMG src="Img/FC.gif">
<TABLE style="border:3px solid black"><TR><TD>TABLE内のTD要素<IMG src="Img/FC.gif">
</TABLE>
]</DIV>

position:sticky： DIV スクロール ボックス内の IMG に指定。

<DIV style="width:150px; height:150px; overflow:scroll; border:1px solid #000">
<IMG class=Move style="position:sticky" src="Img/FC.gif"><BR>
あ<BR>
あ<BR>
あ<BR>
あ<BR>
あ<BR>
あ<BR>
あ<BR>
</DIV>

position:sticky： DIV スクロール ボックス内の SPAN に指定。SPAN 内に IMG 含む。

<DIV style="width:300px; height:150px; overflow:scroll; border:1px solid #000">
<SPAN class=Move style="position:sticky">[SPAN <IMG src="Img/FC.gif">]</SPAN>
<SPAN class=Move style="position:sticky; vertical-align:top">[SPAN <IMG style="vertical-align:top" src="Img/FC.gif">]</SPAN>
</DIV>