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

欲しい機能に応じて各オブジェクトを使用する

前回の何も無い要素に機能を追加していきます

Sample1

 <style type="text/css">

	.dragDelete:hover{

		background: #F00 !important;
		color: #000 !important;

	}


 </style>

 <script type="text/JavaScript">


	dragPoint = 0;


	ContentDate   = new Date();
	ContentHour   = ContentDate.getHours() + "";
	ContentMinute = ContentDate.getMinutes() + "";
	ContentSecond = ContentDate.getSeconds() + "";
	ContentTime   = ContentHour + ":" + ContentMinute + ":" + ContentSecond;

	scheduleComment = new Array();
	scheduleComment[0] = "表示例1<br>表示は5まであります<br>" + ContentTime;
	scheduleComment[1] = "表示例2<br>表示は5まであります<br>" + ContentTime;
	scheduleComment[2] = "表示例3<br>表示は5まであります<br>" + ContentTime;
	scheduleComment[3] = "表示例4<br>表示は5まであります<br>" + ContentTime;
	scheduleComment[4] = "表示例5<br>表示は5まであります<img src='http://cdn-ak.f.st-hatena.com/images/fotolife/f/flandlescarlet/20120109/20120109025256.png'>";
	i = Math.floor(Math.random()*5);
	DragCommentDate = scheduleComment[i]

	function dragOn(e){

		dragPoint = 1;
		return false;

	}

	function dragOndo(e){

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

	}

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

	}

	function deletedragMenu(e){

		document.getElementById("dragContext").style.display = "none";

	}

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

 </script>

<div id="dragContext" style="
	position:absolute;
	left:30px;
	top:60px;
	width:200px;
	height:300px;
	border-radius: 10px;
	padding: 5px;
	color: #FFF;
	font-weight: bold;
	filter: alpha(opacity=85);
	-moz-opacity:0.85;
	opacity:0.85;
	background: url(http://cdn-ak.f.st-hatena.com/images/fotolife/f/flandlescarlet/20120214/20120214004452.jpg);
	/*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;
	"
>
<span class="dragDelete" onClick="deletedragMenu()" style="cursor: pointer;width: 5px; height: 5px; background: #000; color: #FFF; border-radius:10px;">×</span><br>
</div>

キーボードのキー値の取得はブラウザごとに違うと述べたとおり

今回のマウスの座標の位置もブラウザによって異なってきます。

IEとFirefox郡のブラウザで値格納場所が違うのでwindow.eventを使って振り分けます。

次にお知らせメモ帳という事でずっと置いておくわけにはいかないので、削除用ボタンも追加しておきます。

これは毎回定石のdisplay:noneを使って処理を行います。

最後にランダムで表示を変えるものも追加してみました。

行おうと思えば

• タイマー
• 時計
• はてな各サービスへのリンク
• コンテンツにはHTMLタグを含められる
• 毎回違う画像を表示する

といった事ができます。

もちろん背景の画像url指定もできるのでただのお知らせメモではなく

味のあるお知らせメモのコンテンツも作成する事ができます