簡単なオブジェクト移動です。
HTML要素の class 属性に「Move」を含んでいるものだけ移動できます。
移動させたい要素をクリックで移動開始となり、もう一度クリックで終了となります。
移動できるのは、全て、パーツとなる要素（IMG、SPAN、DIV、…）。 ↓ SPAN要素テスト B要素テスト
HEAD内で「MoveA.js」を読み込ませてください。
移動させたい要素の class 属性に「Move」を含めてください。
HTML： <!DOCTYPE HTML> <HTML> <HEAD> <META http-equiv="content-language" content="ja"> <META http-equiv="Content-Type" content="text/html; charset=UTF-8"> <META http-equiv="Content-Style-Type" content="text/css"> <META http-equiv="Content-Script-Type" content="text/javascript"> <TITLE>テスト</TITLE> <STYLE> .Move{ cursor:default; } </STYLE> <SCRIPT src="MoveA.js"></SCRIPT> </HEAD> <BODY> <IMG class=Move src="Img/FC.gif"> <SPAN class=Move>SPAN要素</SPAN> </BODY> </HTML>
MoveA.js： //MoveA 用JavaScript //クリックして移動開始、もう一度クリックして移動終了。 //作成：2021.08.24 by T.A. //編集：2026.02.25 by T.A. //呼出： //<HTML> //<HEAD> //<SCRIPT src="MoveA.js"></SCRIPT> //</HEAD> //<BODY> //<IMG class=Move src="…"> //</BODY> //</HTML> window.addEventListener('load', Init); var MoveSts={MoveEnb:false, OfsX:0, OfsY:0, MoveObj:false}; //初期化 //編集：2023.07.03 function Init(){ let EC=document.body.getElementsByClassName("Move"); //class名「Move」の要素を取得する。 for(let I=0; I<EC.length; I++){ EC[I].addEventListener("click",MoveSE); EC[I].style.position='absolute'; } window.addEventListener('mousemove', ObjMove); } //移動開始／終了 //作成：2023.07.09？ //編集：2026.02.25 //click イベントによる function MoveSE(eve){ if(MoveSts.MoveEnb){ MoveSts.MoveEnb=false; return; } MoveSts.OfsX=eve.offsetX; //最初の位置（要素の左からの位置）を記録 MoveSts.OfsY=eve.offsetY; MoveSts.MoveObj=eve.target; //移動するオブジェクトの記録 MoveSts.MoveEnb=true; //＝移動可能 } //オブジェクトの移動 //編集：2023.07.09 //mousemove イベントによる function ObjMove(eve){ if(!MoveSts.MoveEnb)return; let X=eve.pageX; //＝ページ内でのX位置 let Y=eve.pageY; MoveSts.MoveObj.style.left=(X-MoveSts.OfsX)+"px"; MoveSts.MoveObj.style.top =(Y-MoveSts.OfsY)+"px"; }
SPAN要素テスト
B要素テスト
SPAN要素テスト
B要素テスト