mosemove イベントの利用によるオブジェクトの移動です。
要素の class 属性に「Move」を含めているものだけ移動可能になります。
基本操作は mousedown → 移動 →mouseup です。 ↓ [SPAN要素[B要素]]
HEAD内でスクリプトを読み込ませるだけです。
移動させたい要素の class 属性に「Move」を含めてください。
Test.htm： <!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> .Move{ cursor:default; } </STYLE> <SCRIPT src="c/MoveB.js"></SCRIPT> </HEAD> <BODY> <IMG class=Move src="c/FC.gif"> <SPAN class=Move>[SPAN要素<B>[B要素]</B>]</SPAN> <DIV class=Move>[DIV要素<B>[B要素]</B>]</DIV> </BODY> </HTML>
MoveB.js： //MoveB 用JavaScript //MouseDown→移動→MouseUp。 //作成：2026.02.26 by T.A. //編集：2026.02.26 by T.A. //呼出： //<HTML> //<HEAD> //<SCRIPT src="MoveB.js"></SCRIPT> //</HEAD> //<BODY> //<IMG class=Move src="…"> //</BODY> //</HTML> window.addEventListener('load', Init); var MoveSts={MEnb:false}; //初期化 //作成：2026.02.26 by T.A. //編集：2026.02.26 function Init(){ let EC=document.body.getElementsByClassName("Move"); //class名「Move」の要素を取得する。 for(let I=0; I<EC.length; I++){ EC[I].addEventListener("mousedown",MoveStart); EC[I].addEventListener("mouseup",MoveEnd); EC[I].style.position='relative'; } window.addEventListener('mousemove', ObjMove); } //オブジェクトの移動開始 //作成：2026.02.26 by T.A. //編集：2026.02.26 //targetのmousedown イベントによる function MoveStart(eve){ MoveSts.MObj=eve.currentTarget; //移動するオブジェクトの記録 let OL=MoveSts.MObj.style.left || 0; let OT=MoveSts.MObj.style.top || 0; MoveSts.OfsX=Number.parseInt(OL); //要素の位置 MoveSts.OfsY=Number.parseInt(OT); MoveSts.StartPX=eve.pageX; //＝ポインターの初期位置記録 MoveSts.StartPY=eve.pageY; MoveSts.MEnb=true; //＝移動可能 MoveSts.MObj.draggable=false; } //オブジェクトの移動終了 //作成：2026.02.26 by T.A. //編集：2026.02.26 //targetのmouseup イベントによる function MoveEnd(eve){ MoveSts.MEnb=false; } //オブジェクトの移動 //作成：2026.02.26 by T.A. //編集：2026.02.26 //windowのmousemove イベントによる function ObjMove(eve){ if(!MoveSts.MEnb) return; let X=eve.pageX; //＝ポインターのページ内でのX位置 let Y=eve.pageY; MoveSts.MObj.style.left=(MoveSts.OfsX+(X-MoveSts.StartPX))+"px"; MoveSts.MObj.style.top =(MoveSts.OfsY+(Y-MoveSts.StartPY))+"px"; } //●デバッグ用データ表示 //作成：2026.02.25 by T.A. //編集：2026.02.25 function Debug(D){ if(typeof DocDebug==undefined) return; DocDebug.innerHTML=D; } //作成：2026.02.25 by T.A. //編集：2026.02.25 function Debug2(D){ if(typeof DocDebug==undefined) return; DocDebug2.innerHTML=D; }
