作ったもの動かす方法

http://dotinstall.com/lessons/basic_nodejs/26202

このように丸や四角などの図形を作って操作するには
どうしたらいいですか？

tanat

2015/12/07 14:09

こちらの質問が他のユーザから「質問の範囲が広すぎる」という評価を受けていますわからない点を明確にし、調査したこと・試したことと共に記入していただくと、回答が得られやすくなります。

katoy

2015/12/07 22:08

行動規範の内容に同意します

回答3件

ベストアンサー

よかろう、そんなに知りたければワシが教えてしんぜよう。
このコードにはワシがため込んだかなり沢山のノウハウが詰め込まれているから心してかかるんじゃぞ。まじで。

HTML
1<html>
2	<head>
3    	<meta charset="utf-8" >
4        <style>
5            * { margin: 0; padding: 0;}
6        	html,body { width:100%; height: 100%; position: relative; background: #CFF; -ms-user-select: none;-webkit-user-select:none;-o-user-select:none; user-select: none;}
7			p { display: block; width: 50px; height: 50px; position: absolute; color: white; line-height: 50px; text-align: center; font-weight: bold; font-size: 13px; cursor: pointer;}
8			p:active { z-index: 1;}
9			.circle { border-radius: 25px; background:#FC3;}
10			.rect   { border-radius: 5px; background:#099;}
11        </style>
12    </head>
13	<body>
14    	<p class="circle">req</p>
15        <p class="circle">req</p>
16        <p class="circle">req</p>
17        <p class="circle">req</p>
18        <p class="circle">req</p>
19        <p class="rect">Thread</p>
20        <p class="rect">Thread</p>
21        <p class="rect">Thread</p>
22        <p class="rect">Thread</p>
23        <p class="rect">Thread</p>
24        
25        <script>
26        	var p = document.getElementsByTagName('p');
27			
28			for(i=p.length; i--;){
29				p[i].addEventListener('mousedown', move, false);
30			}
31			
32			function move(e){
33				
34				var elem = this;
35				var positionY = e.clientY - this.offsetTop;
36				var positionX = e.clientX - this.offsetLeft;
37				
38				document.onmousemove = function(e){
39		
40					elem.style.top  = e.clientY - positionY + 'px';
41					elem.style.left = e.clientX - positionX + 'px';
42			
43				}
44				
45				document.onmouseup = function(){
46					
47					this.onmousemove = null;
48					this.onmouseup   = null;
49				}
50			}
51        </script>
52    </body>
53</html>