JavaScriptでドラッグコンテンツを作成してお知らせメモ帳を作る

クリックしてメニューを移動させる

ドラッガブルやドラッギングとも言われるこのドラッグに関するコンテンツですが

実際にはてなブログで操作できるようにしてみようと思います。

まずJavaScriptの大まかな流れを考えていきます。

• クリックした時に関数を発動
• クリックしたままマウスを動かしてコンテンツを移動
• クリックを解除した時にコンテンツ移動を停止させる

といった流れになります

まず手始めにアルゴリズムを考えていこうと思います。

ドラッガブルに関してはjQueryで簡単に作成できるライブラリも存在していますが

基本的にははてなブログではJavaScriptの対応のみでjQueryは対応していないため

簡易にはできないものの比較的シンプルに近い形でソースを書いていこうと思います。

Sample1

<div id="dragContext" style="
	position:absolute;
	left:30px;
	top:60px;
	width:200px;
	height:300px;
	border-radius: 10px;
	filter: alpha(opacity=85);
	-moz-opacity:0.85;
	opacity:0.85;
	background: #000;
	background: -moz-linear-gradient(top, blue, skyblue);
	background: -webkit-gradient(linear, left top, left bottom, from(#990), to(#066));
	box-shadow: 2px 2px 3px #444;
	border:1px black solid;
	"
>
</div>

 まずはメニューのコンテンツから作成していきます。

タグは<div>にしてインライン要素で値を適応させていきます(本来ならばCSS欄に書くのが望ましい)

今回のメニューですがブラウザ独自のCSSの設定もしてあるので各ブラウザで表示が変わるようになっています。

Sample2

 <script type="text/JavaScript">


	dragPoint = 0;

	function dragOn(e){

		dragPoint = 1;
		return false;

	}

	function dragOndo(e){

		if(dragPoint == 1){
			drag = document.getElementById("dragContext");
                        mouseY = e.clientY -20;
                        mouseX = e.clientX -50;
			drag.style.top = mouseY + "px";
			drag.style.left =mouseX + "px";
		}
		return false;

	}

	function dragOff(){
	
		dragPoint = 0;
		return false;

	}

window.onload = function(){
	document.getElementById("dragContext").onmousedown = dragOn;
	window.document.onmousemove = dragOndo;
	document.getElementById("dragContext").onmouseup = dragOff;
}

 </script>

 これがスクリプト側のソースとなります

1から砕いて説明していくと、まず一番下の関数ですが

ウインドウを読み込んだ時に無名関数を呼び出して各マウスのイベント関数を中に含めておきます。

まずdragPointという独自の変数を用意します。

これはマウスをクリックして移動させているとき　マウスをクリックして移動させていないとき

という意味を兼ねて設定しています。

マウスをクリックすることにより変数には1の値が入ります。

onmousemoveというハンドラがありますが、これはいつでも呼び出せる状態にしてあります。

よってマウスをクリックしていようがしていまいが関数は常に動いているといった状態になります。

これでは(マウスの近くに画像を置いて一種のマウスカーソル作成)のスクリプト開発となってしまいます(これについては何時かやろうと思います)

ですのでクリックした時に1を入れることにより初めてコンテンツがonmousemoveいわゆるクリックしているときに動くという状況を作ることができます。

これでは一度クリックしたらそのコンテンツはif文の1がtrueで回り続けるので、マウスのクリックを話した時にonmousemoveを作動させないようにifをfalseにするため0を変数に与えるようにしています。

これがマウスを用いてのコンテンツ移動の"一番"シンプルな形なのではないかと思っています。

次回から作り込みに入ろうと思います