マウスクリックにてブラウザに正方形を描画する

JavaScript, jQuery

ブラウザの特定エリアをクリックすると小さな正方形が描かれるようなプログラムを作りたいのであります。

■完成イメージ
put_box

さらに小さな正方形をドラッグして移動できるようにもしたいのであります。
そのためには、JavaScriptとjQueryのパワーが必要なのであります。

HTMLファイルの準備

とりあえず、マウスクリックするエリアのみを表示するHTMLファイルを用意しましょう。
以下のようになります。

(ファイル名) putbox.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>マウスクリックで正方形を置く</title>
<link rel="stylesheet" href="putbox.css" />
</head>
<body>
<div id="ground"></div>
</body>
</html>

さらに、div要素の指定や見栄えをよくするためのスタイルシートも用意します。

(ファイル名) putbox.css

* {
	margin: 0;
	padding: 0;
}

div#ground {
	overflow: hidden;
	width: 256px;
	height: 256px;
	position: relative;
	background-color: #fbb;
	border:solid 3px #F00;
}

/* 今回のHTMLファイルでは不要だが、小さな正方形を表示する際に必要となる。*/
div.textbox {
	position: absolute;
	width: 50px;
	height: 50px;
	background-color: #000;
	border: solid 1px #00f;
	background-color: #88f;
}

putbox.htmlを表示すると以下のようになります。
putbox2

次回、JavaScriptとjQueryを駆使して、マウスクリックによる正方形描画をプログラミングします。