SITEMAP [初めてのホームページ講座] [JavaScript , DHTML] [マウスでドラッグ＆ドロップ]

マウスでドラッグ＆ドロップ

機能

テキストや画像をマウスでドラッグ＆ドロップ出来るようにするダイナミックHTMLです。

利用方法

HEAD部分にスタイル(CSS)とスクリプトを記述します。 BODY部分には、DIV要素に対してID属性iL1を指定し、ドラッグ＆ドロップする対象のテキストを記述します。（ここでは「初めてのホームページ講座」）最後にBODY要素の属性として、イベントハンドラonloadに関数Init()を指定します。

改造方法

ドラッグ＆ドロップする対象のテキストのスタイルを変更可能です。

スタイル(Style1): CSSリファレンスに従って、変更可

対応ブラウザ

IE4,NN4以上

サンプル

［サンプルを見る］［ダウンロード］

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>

<HEAD>

<META HTTP-EQUIV="Content-Type" CONTENT="text/html;charset=Shift_JIS">
<META HTTP-EQUIV="Content-Style-Type" CONTENT="text/css">
<META HTTP-EQUIV="Content-Script-Type" CONTENT="text/javascript">
<TITLE>マウスでドラッグ＆ドロップ</TITLE>

<STYLE TYPE="text/css">
<!--
.Style1{
	position:		absolute;
	left:			100px;
	top:			100px;
	width:			450px;
	height:			40px;
	font-size:		28pt;
	font-weight:		bold;
	color:			#0000ff;
}
-->
</STYLE>

<SCRIPT LANGUAGE="javascript" TYPE="text/javascript">
<!--
//ブラウザのバージョンチェック
var brw_v = navigator.appVersion.charAt(0);
var brw_n = navigator.appName.charAt(0);
var iIE4 = false;
var iNN4 = false;
if((brw_v >= 4)&&(brw_n == "M"))iIE4 = true;
if((brw_v >= 4)&&(brw_n == "N"))iNN4 = true;

var M_flag = false;
var dx,dy;

function Init(){
	if(iIE4){
		document.onmousedown = Mdown;
		document.onmouseup = Mup;
		lay = document.all("iL1");
		document.onmousemove = Mmove;
	}
	if(iNN4){
		window.captureEvents(Event.MOUSEDOWN | Event.MOUSEUP);
		window.captureEvents(Event.MOUSEMOVE);
		lay = document.layers["iL1"];
		window.onmousedown = Mdown;
		window.onmouseup = Mup;
		window.onmousemove = Mmove;
	}
}

function Mdown(e){
	if(iIE4){
		dx = event.offsetX;
		dy = event.offsetY;
	}
	if(iNN4){
		dx = e.layerX;
		dy = e.layerY;
	}
	M_flag = true;
	return false;
}

function Mup(e){
	M_flag = false;
	return false;
 }

function Mmove(e){
	if(iIE4){
		if(M_flag){
			lay.style.posLeft = event.clientX - dx;
			lay.style.posTop = event.clientY - dy;
		}
		event.returnValue = false;
	}
	if(iNN4){
		if(M_flag){
			lay.left = e.pageX - dx;
			lay.top = e.pageY - dy;
		}
		return false;
	}
}
// -->
</SCRIPT>

</HEAD>

<BODY onload="Init()">

<DIV>下の文字はマウスでドラッグ＆ドロップできます。</DIV>
<DIV ID="iL1" CLASS="Style1">初めてのホームページ講座</DIV>

</BODY>
</HTML>

[Go To Top]