ドラッグして画像を移動させる

  下のアイコンをドラッグできます





  
<HTML>
<BODY>
ドラッグして画像を移動させる
<br><br>
<IMG src=happy.gif style="position:absolute;">
</BODY>
</HTML>
<SCRIPT language=JavaScript>

	var mDrag = 0;			// ドラッグ中は 1
	var imgOffX;			// 画像内でのマウス位置のオフセット
	var imgOffY;			//
	var targetElement;			// 目的の画像オブジェクト
	var BodyObj = document.all.tags( "BODY" );

</SCRIPT>
<SCRIPT FOR=document EVENT=onmousedown LANGUAGE=JavaScript>

	targetElement	= event.srcElement;	// 目的の画像
	if ( targetElement.tagName == 'IMG' ) {
		imgOffX		= event.offsetX;
		imgOffY		= event.offsetY;
	}

</SCRIPT>
<SCRIPT FOR=document EVENT=ondragstart LANGUAGE=JavaScript>

	event.returnValue	= false;	// 規定のドラッグ処理を解除
	mDrag			= 1;

</SCRIPT>
<SCRIPT FOR=document EVENT=onmouseup LANGUAGE=JavaScript>

	mDrag = 0;

</SCRIPT>
<SCRIPT FOR=document EVENT=onmousemove LANGUAGE=JavaScript>

	if ( mDrag == 1 ) {
		targetElement.style.top	= event.clientY - imgOffY +  BodyObj(0).scrollTop
		targetElement.style.left	= event.clientX - imgOffX
	}

</SCRIPT>
  













   SQLの窓    create:2001/10/22  update:2014/09/07   管理者用(要ログイン)





フリーフォントWEBサービス

SQLの窓WEBサービス

SQLの窓フリーソフト

写真素材

一般WEBツールリンク

SQLの窓

フリーソフト

JSライブラリ