teratail
回答率
85.30%
teratail header banner
teratail header banner
質問するログイン新規登録
トップに関する質問要素を追加、削除したい

編集履歴

質問編集履歴

2

文法の修正

2019/11/29 02:56

投稿

minomonnta
minomonnta

スコア9

title CHANGED
File without changes
body CHANGED
@@ -22,137 +22,4 @@
22
22
  <p>
23
23
  <input type="submit" value="次へ" name="send">
24
24
  </p>
25
- ```
26
-
27
-
28
- ```javascript
29
- window.onload = function() {
30
-
31
- //要素の取得
32
- var elements = document.getElementsByClassName("drag-and-drop");
33
-
34
-
35
- //要素内のクリックされた位置を取得するグローバル（のような）変数
36
- var x;
37
- var y;
38
-
39
- //マウスが要素内で押されたとき、又はタッチされたとき発火
40
- for(var i = 0; i < elements.length; i++) {
41
- elements[i].addEventListener("mousedown", mdown, false);
42
- elements[i].addEventListener("touchstart", mdown, false);
43
- }
44
-
45
-
46
- //マウスが押された際の関数
47
- function mdown(e) {
48
-
49
- //クラス名に .drag を追加
50
- this.classList.add("drag");
51
-
52
-
53
- //タッチデイベントとマウスのイベントの差異を吸収
54
- if(e.type === "mousedown") {
55
- var event = e;
56
- } else {
57
- var event = e.changedTouches[0];
58
- }
59
-
60
- //要素内の相対座標を取得
61
- x = event.pageX - this.offsetLeft;
62
- y = event.pageY - this.offsetTop;
63
-
64
- //ムーブイベントにコールバック
65
- document.body.addEventListener("mousemove", mmove, false);
66
- document.body.addEventListener("touchmove", mmove, false);
67
- }
68
-
69
- //マウスカーソルが動いたときに発火
70
- function mmove(e) {
71
-
72
- //ドラッグしている要素を取得
73
- var drag = document.getElementsByClassName("drag")[0];
74
-
75
-
76
- //同様にマウスとタッチの差異を吸収
77
- if(e.type === "mousemove") {
78
- var event = e;
79
- } else {
80
- var event = e.changedTouches[0];
81
- }
82
-
83
- //フリックしたときに画面を動かさないようにデフォルト動作を抑制
84
- e.preventDefault();
85
-
86
- //マウスが動いた場所に要素を動かす
87
- drag.style.top = event.pageY - y + "px";
88
- drag.style.left = event.pageX - x + "px";
89
-
90
- //マウスボタンが離されたとき、またはカーソルが外れたとき発火
91
- drag.addEventListener("mouseup", mup, false);
92
- document.body.addEventListener("mouseleave", mup, false);
93
- drag.addEventListener("touchend", mup, false);
94
- document.body.addEventListener("touchleave", mup, false);
95
-
96
- }
97
-
98
- //マウスボタンが上がったら発火
99
- function mup(e) {
100
- var drag = document.getElementsByClassName("drag")[0];
101
-
102
- //ムーブベントハンドラの消去
103
- document.body.removeEventListener("mousemove", mmove, false);
104
- drag.removeEventListener("mouseup", mup, false);
105
- document.body.removeEventListener("touchmove", mmove, false);
106
- drag.removeEventListener("touchend", mup, false);
107
-
108
- //クラス名 .drag も消す
109
- drag.classList.remove("drag","drag2","drag3");
110
- }
111
-
112
- }
113
- document.body.addEventListener( "click", function( event ) {
114
- var x = event.pageX ;
115
- var y = event.pageY ;
116
- } ) ;
117
-
118
- window.addEventListener("click", function(){
119
- let px = event.pageX; //クリックX
120
- let py = event.pageY; //クリックY
121
-
122
- let ox = window.pageXOffset; //スクロールX
123
- let oy = window.pageYOffset; //スクロールY
124
-
125
- let obj = document.elementFromPoint(px - ox, py - oy); //object
126
-
127
- let objX = obj.getBoundingClientRect().left; //objectのX
128
- let objY = obj.getBoundingClientRect().top; //objectのY
129
-
130
- console.log("クリックした位置のX座標　x:" + (px-ox));
131
- console.log("クリックした位置のY座標　y:" + (py-oy));
132
- console.log("クリックした要素のX座標　x:" + objX);
133
- console.log("クリックした要素のY座標　y:" + objY);
134
- });
135
-
136
-
137
- document.getElementById("target").addEventListener('click', function(event) {
138
- var kimetu = event.pageX ; // 水平の位置座標
139
- var yaiba = event.pageY ; // 垂直の位置座標
140
- document.getElementsByName('zahyou')[0].value = kimetu + ":" + yaiba;
141
- });
142
-
143
-
144
-
145
- function muuXY(e, that) {
146
- if (!e) e = window.event;
147
- var x, y;
148
- if (e.targetTouches) {
149
- x = e.targetTouches[0].pageX - e.target.offsetLeft;
150
- y = e.targetTouches[0].pageY - e.target.offsetTop;
151
- }else if (that){
152
- x = e.pageX - that.offsetLeft;
153
- y = e.pageY - that.offsetTop;
154
- }
155
- return [x,y];
156
- }
157
-
158
25
  ```

1

文法の修正

2019/11/29 02:56

投稿

minomonnta
minomonnta

スコア9

title CHANGED
File without changes
body CHANGED
@@ -1,13 +1,13 @@
1
- 要素A、要素B、要素C・・・という風に追加と削除したい
1
+ 追加ボタン、削除ボタンそれぞれクリックすると
2
- 追加、削除したときにテキストボックスも連動してできるようにしたい
2
+ 要素とテキストボックスがそれぞれ、追加、削除されるようにしたい
3
-
4
-
5
3
  ```html
6
4
  //動かしたい要素
7
5
  <div class="drag-and-drop" id="target" style="top:1;left:0px;background-color:#ffa500;">要素A</div>
8
- <div class="drag-and-drop2" id="target2" style="top:1;left:110px;background-color:#ffa500;">要素B</div>
9
- <div class="drag-and-drop3" id="target3" style="top:1;left:220px;background-color:#ffa500;">要素C</div>
10
6
 
7
+ //追加ボタン
8
+ <input type="button" value="追加">
9
+ //削除ボタン
10
+ <input type="button" value="削除">
11
11
 
12
12
  <form method="post" action="" >
13
13
  <p>
@@ -17,27 +17,21 @@
17
17
  要素A
18
18
  <input type="text" value="クリックしてね☆" name="zahyou">
19
19
  </p>
20
- <p>
21
- 要素B
22
- <input type="text" value="クリックしてね☆" name="zahyou2">
23
- </p>
24
- <p>
25
- 要素C
26
- <input type="text" value="クリックしてね☆" name="zahyou3">
27
20
 
28
21
  　//送信
29
22
  <p>
30
23
  <input type="submit" value="次へ" name="send">
31
24
  </p>
32
25
  ```
26
+
27
+
33
28
  ```javascript
34
29
  window.onload = function() {
35
30
 
36
31
  //要素の取得
37
32
  var elements = document.getElementsByClassName("drag-and-drop");
38
- var elements2 = document.getElementsByClassName("drag-and-drop2");
39
- var elements3 = document.getElementsByClassName("drag-and-drop3");
40
33
 
34
+
41
35
  //要素内のクリックされた位置を取得するグローバル（のような）変数
42
36
  var x;
43
37
  var y;
@@ -47,16 +41,6 @@
47
41
  elements[i].addEventListener("mousedown", mdown, false);
48
42
  elements[i].addEventListener("touchstart", mdown, false);
49
43
  }
50
- //マウスが要素内で押されたとき、又はタッチされたとき発火
51
- for(var i = 0; i < elements.length; i++) {
52
- elements2[i].addEventListener("mousedown", mdown, false);
53
- elements2[i].addEventListener("touchstart", mdown, false);
54
- }
55
- //マウスが要素内で押されたとき、又はタッチされたとき発火
56
- for(var i = 0; i < elements.length; i++) {
57
- elements3[i].addEventListener("mousedown", mdown, false);
58
- elements3[i].addEventListener("touchstart", mdown, false);
59
- }
60
44
 
61
45
 
62
46
  //マウスが押された際の関数
@@ -64,11 +48,8 @@
64
48
 
65
49
  //クラス名に .drag を追加
66
50
  this.classList.add("drag");
67
- //クラス名に .drag2 を追加
68
- this.classList.add("drag2");
69
- //クラス名に .drag3 を追加
70
- this.classList.add("drag3");
71
51
 
52
+
72
53
  //タッチデイベントとマウスのイベントの差異を吸収
73
54
  if(e.type === "mousedown") {
74
55
  var event = e;
@@ -90,10 +71,7 @@
90
71
 
91
72
  //ドラッグしている要素を取得
92
73
  var drag = document.getElementsByClassName("drag")[0];
93
- //ドラッグしている要素を取得
74
+
94
- var drag2 = document.getElementsByClassName("drag2")[0];
95
- //ドラッグしている要素を取得
96
- var drag3 = document.getElementsByClassName("drag3")[0];
97
75
 
98
76
  //同様にマウスとタッチの差異を吸収
99
77
  if(e.type === "mousemove") {
@@ -119,7 +97,7 @@
119
97
 
120
98
  //マウスボタンが上がったら発火
121
99
  function mup(e) {
122
- var drag = document.getElementsByClassName("drag","drag2","drag3")[0];
100
+ var drag = document.getElementsByClassName("drag")[0];
123
101
 
124
102
  //ムーブベントハンドラの消去
125
103
  document.body.removeEventListener("mousemove", mmove, false);
@@ -162,17 +140,7 @@
162
140
  document.getElementsByName('zahyou')[0].value = kimetu + ":" + yaiba;
163
141
  });
164
142
 
165
- document.getElementById( "target2" ).addEventListener('click', function(event) {
166
- var kuroko = event.pageX ; // 水平の位置座標
167
- var basuke = event.pageY ; // 垂直の位置座標
168
- document.getElementsByName('zahyou2')[0].value = kuroko + ":" + basuke;
169
- });
170
143
 
171
- document.getElementById( "target3" ).addEventListener('click', function(event) {
172
- var saikikusuo = event.pageX ; // 水平の位置座標
173
- var sainann = event.pageY ; // 垂直の位置座標
174
- document.getElementsByName('zahyou3')[0].value = saikikusuo + ":" + sainann;
175
- });
176
144
 
177
145
  function muuXY(e, that) {
178
146
  if (!e) e = window.event;