MoveC

編集：2023.07.09 by T.A.

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

drag イベントによる移動は IMG 要素のみしか対応していないようです。

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

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

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

組み込み方

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

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

サンプル

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

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

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

position:relative：

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

position:relative： 全てclassで指定

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

position:relative： テキストは内容を取得できないので対象外。そもそも範囲指定してからの移動なので用途に合わない。

<SPAN class=Move style="position:relative">[SPAN：テキスト]</SPAN>

position:relative： AUDIO 要素。dragstart イベントが発生しない為、移動できません。

開始<AUDIO class=Move style="position:relative" src="Com/Sample.mp3" controls></AUDIO>終了

position:relative： VIDEO 要素。dragstart イベントが発生しない為、移動できません。

開始<VIDEO class=Move style="position:relative" src="Com/Sample.mp4" controls></VIDEO>終了

position:absolute：

開始<IMG class=Move style="position:absolute" src="Com/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="Com/FC.gif">
</DIV>

position:fixed：

<IMG class=Move style="position:fixed; left:200px; top:100px;" src="Com/FC.gif" title="position:fixed">

position:sticky： BODY 直下の場合。

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

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

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