teratail header banner
teratail header banner
質問するログイン新規登録

質問編集履歴

3

回答者様のアドバイスを受けて編集しました

2020/12/22 15:33

投稿

oasis
oasis

スコア2

title CHANGED
File without changes
body CHANGED
@@ -158,20 +158,107 @@
158
158
  javascript
159
159
 
160
160
  ライブラリは Yahoo! YUI Libraryを使用しています
161
+ //回答を受けて再び編集しました
162
+   協力していただきたけると助かります
163
+ //ロード
164
+ YAHOO.util.Event.addListener(window, "load", function(){
161
165
 
166
+
167
+
168
+ //家具の配列データ
169
+ var kagu =['contents1','contents2','contents3','contents4','contents5'];
170
+                  //kagu[0]→ 本棚です
171
+ var ddObj = new YAHOO.util.DD(kagu[0]);
172
+
173
+ //X軸とY軸の指定
174
+ //フローリング規定 X300 Y322
175
+ ddObj.setXConstraint(0, 400, 10);
176
+ ddObj.setYConstraint(0, 400, 10);
177
+
178
+ var ddObj2 = new YAHOO.util.DD(kagu[1]);
179
+
180
+ ddObj2.setXConstraint(0, 400, 10);
181
+ ddObj2.setYConstraint(0, 400, 10);
182
+
183
+
184
+ var ddObj3 = new YAHOO.util.DD(kagu[2]);
185
+
186
+ ddObj3.setXConstraint(0, 400, 10);
187
+ ddObj3.setYConstraint(0, 400, 10);
188
+
189
+
190
+ var ddObj4 = new YAHOO.util.DD(kagu[3]);
191
+
192
+ ddObj4.setXConstraint(0, 400, 10);
193
+ ddObj4.setYConstraint(0, 400, 10);
194
+
195
+ var ddObj5 = new YAHOO.util.DD(kagu[4]);
196
+
197
+ ddObj5.setXConstraint(0, 400, 10);
198
+ ddObj5.setYConstraint(0, 400, 10);
199
+
200
+ // 家具の追加オブジャクト
201
+ });
202
+
203
+ //家具配列データ
204
+ var kagu =['contents1','contents2','contents3','contents4','contents5'];
205
+
206
+
207
+ //ボタン機能
208
+
209
+ //スタートボタン
210
+ function btn(){
211
+
212
+ document.getElementById(kagu[0]).style.left = "0px";
213
+ document.getElementById(kagu[1]).style.left = "80px";
214
+ document.getElementById(kagu[2]).style.left = "160px";
215
+ document.getElementById(kagu[3]).style.left = "240px";
216
+ document.getElementById(kagu[4]).style.left = "320px";
217
+ }
218
+
219
+ //商品一覧から画面遷移ボタン
220
+
221
+ function btn0(){
222
+ document.getElementById(kagu[0]).style.left = 'visible';
223
+ }
224
+ function btn1(){
225
+ document.getElementById(kagu[1]).style.left = "80px";
226
+
227
+ }
228
+
229
+ function btn2(){
230
+ document.getElementById(kagu[2]).style.left = "160px";
231
+
232
+ }
233
+ function btn3(){
234
+ document.getElementById(kagu[3]).style.left = "240px";
235
+
236
+ }
237
+ function btn4(){
238
+ document.getElementById(kagu[4]).style.left = "320px";
239
+
240
+ }
241
+
242
+
243
+
244
+
245
+
246
+ // 追加 ☆ 質問する場所 エラーが起こっている場所 複製ボタン
247
+
162
248
  YAHOO.util.Event.addLister(window,"load",moveItems)
163
- //ライブりイベント
164
249
 
250
+
251
+
165
252
  function moveItems(){
166
253
 
167
254
  //クローンの配列化
168
255
 
169
256
 
170
-
257
+ //なんかの処理→移動制限
171
- var ddObj6 = new YAHOO.util.DD("clone");
258
+ var ddObj = new YAHOO.util.DD("targetID");
172
259
 
173
- ddObj6.setXConstraint(0, 322, 10);
260
+ ddObj.setXConstraint(0, 322, 10);
174
- ddObj6.setYConstraint(0, 300, 10);
261
+ ddObj.setYConstraint(0, 300, 10);
175
262
 
176
263
 
177
264
 
@@ -201,131 +288,58 @@
201
288
 
202
289
 
203
290
  }
291
+
292
+ // 家具の追加オブジャクト
204
293
 
294
+ //回答者様に教えてもらったところ
295
+ function cloneElement(furniture,kaguInd){
296
+             
297
+   /*furnitureは種類として
298
+       kaguIndは添え字として配列としてデータを格納するべきなのか?*/
299
+       
205
300
 
206
301
 
207
-
208
- // 家具の追加オブジャクト
302
+ //既存の家具をコピーする
303
+  
304
+              //kagu[0]のcloneを作りたい場合?は具体例があると助かります!
209
- function cloneElement(){
305
+          //kagu[0]は本棚です
210
306
 
211
- //既存家具を
307
+             /*kagu[0]は?となった場合は一番最初のコードに記載してい
308
+              既存の本棚のデータです
309
+              既存の本棚のクローンを作る具体例をよろしくお願いします!*/
212
- const tpl = document.getElementById(kagu[0]);
310
+ const tpl = document.getElementById(kagu[kaguInd]);
213
311
  const clone = tpl.cloneNode(true);
312
+
313
+ const targetIDPrefix = furniture + "clone";
314
+ const suffix = document.querySelectorAll('[id^='+targetIDPrefix+']').length;
315
+
316
+ // ~Clone0とか~Clone1みたいに後ろの数字が要素の数に応じて増えていく
317
+ clone.id = targetIDPrefix + suffix;
318
+
214
319
 
215
320
 
216
321
  // idとdisplayの設定
217
- clone.id = "clone";
322
+ clone.id = furniture+"clone";
218
323
  clone.class = "sample";
219
324
  clone.style.left ="0px";
220
325
  clone.style.display ="block";
221
326
 
222
327
  //クローンにマウスドラックイベントを追加する
223
- clone.addEventListener("drag",moveItems)
328
+ clone.addEventListener("drag",function(){
224
329
 
330
+
331
+ moveItems(this.id);
332
+ });
333
+
334
+
225
335
  //フローリングに出力
226
336
  base = document.getElementById('box1')
227
337
  base.appendChild(clone);
228
-
229
- //同じイベント処理をもつ家具を何回も出力するようにしたいです
230
- }
231
338
 
232
- function cloneElement1(){
233
339
 
234
- //追加しました
235
340
 
341
+ }
236
342
 
237
- const tpl = document.getElementById(kagu[1]);
238
- const clone1 = tpl.cloneNode(true);
239
-
240
-
241
- // idとdisplayの設定
242
- clone1.id = "clone1";
243
- clone1.class = "sample";
244
- clone1.style.left ="0px";
245
- clone1.style.display ="block";
246
-
247
-
248
- clone1.addEventListener("drag",moveItems)
249
-
250
-
251
- // フローリングに表示
252
- base = document.getElementById('box1')
253
- base.appendChild(clone1);
254
-
255
- }
256
-
257
- function cloneElement2(){
258
-
259
- const tpl = document.getElementById(kagu[2]);
260
-
261
-
262
- const clone2 = tpl.cloneNode(true);
263
-
264
-
265
- // idとdisplayの設定
266
- clone2.id = "clone2";
267
- clone2.class = "sample";
268
- clone2.style.left ="0px";
269
- clone2.style.display ="block";
270
-
271
-
272
- clone2.addEventListener("drag",moveItems)
273
-
274
- // フローリングに表示
275
- base = document.getElementById('box1')
276
- base.appendChild(clone2);
277
-
278
- }
279
-
280
-
281
-
282
- function cloneElement3(){
283
-
284
- const tpl = document.getElementById(kagu[3]);
285
-
286
-
287
- const clone3 = tpl.cloneNode(true);
288
-
289
-
290
- // idとdisplayの設定
291
- clone3.id = "clone3";
292
- clone3.class = "sample";
293
- clone3.style.left ="0px";
294
- clone3.style.display ="block";
295
-
296
-
297
- clone3.addEventListener("drag",moveItems)
298
-
299
- // フローリングに表示
300
- base = document.getElementById('box1')
301
- base.appendChild(clone3);
302
-
303
- }
304
-
305
-
306
- function cloneElement4(){
307
-
308
- const tpl = document.getElementById(kagu[4]);
309
-
310
- const clone4 = tpl.cloneNode(true);
311
-
312
-
313
- // idとdisplayの設定
314
- clone4.id = "clone4";
315
- clone4.class = "sample";
316
- clone4.style.left ="0px";
317
- clone4.style.display ="block";
318
-
319
-
320
- clone4.addEventListener("drag",moveItems)
321
-
322
- // フローリングに表示
323
- base = document.getElementById('box1')
324
- base.appendChild(clone4);
325
-
326
- }
327
-
328
-
329
343
  ```
330
344
 
331
345
  ### 試したこと

2

ソースコードをさらに追加しました協力していただきたけると助かります!

2020/12/22 15:33

投稿

oasis
oasis

スコア2

title CHANGED
File without changes
body CHANGED
@@ -45,8 +45,49 @@
45
45
 
46
46
  </div>
47
47
  </div>
48
+ <div class="menu-card">
49
+ <div class="menu-card-inner">
50
+ <img class="menu-image" src="./images/trend_20150716131537.jpg" alt="家具1">
51
+ <h3 class="menu-title">テレビ<br>
52
+ 27000円</h3>
53
+ <button class ="btn" onclick="document.getElementById('contents2').style.visibility = 'visible';">クリック</button>
54
+ <button class ="btn" onclick="cloneElement1();stopclone()">追加</button>
55
+
56
+ </div>
57
+ </div>
48
58
 
59
+ <div class="menu-card">
60
+ <div class="menu-card-inner">
61
+ <img class="menu-image" src="./images/1b71e2b924b8a56374648cb8efdc1958.jpg" alt="家具1">
62
+ <h3 class="menu-title">机<br>
63
+ 3000円
64
+ </h3>
65
+ <button class ="btn" onclick="document.getElementById('contents3').style.visibility = 'visible';">クリック</button>
66
+ <button class ="btn" onclick=cloneElement2()>追加</button>
67
+ </div>
68
+ </div>
69
+ <div class="menu-card">
70
+ <div class="menu-card-inner">
71
+ <img class="menu-image" src="./images/471429001.jpg" alt="レモネード">
72
+ <h3 class="menu-title">食器棚<br>
73
+ 8000円</h3>
74
+ <button class ="btn" onclick="document.getElementById('contents4').style.visibility = 'visible';">クリック</button>
75
+ <button class ="btn" onclick=cloneElement3()>追加</button>
76
+ </div>
77
+ </div>
78
+
49
79
 
80
+ <div class="menu-card">
81
+ <div class="menu-card-inner">
82
+ <img class="menu-image" src="./images/mv_raffia-1.jpg" alt="カフェラテ">
83
+ <h3 class="menu-title">ベット<br>
84
+ 16000円</h3>
85
+ <button class ="btn" onclick="document.getElementById('contents5').style.visibility = 'visible';">クリック</button>
86
+ <button class ="btn" onclick=cloneElement4()>追加</button>
87
+ </div>
88
+ </div>
89
+
90
+ //追加しました
50
91
  css
51
92
 
52
93
 
@@ -187,6 +228,104 @@
187
228
 
188
229
  //同じイベント処理をもつ家具を何回も出力するようにしたいです
189
230
  }
231
+
232
+ function cloneElement1(){
233
+
234
+ //追加しました
235
+
236
+
237
+ const tpl = document.getElementById(kagu[1]);
238
+ const clone1 = tpl.cloneNode(true);
239
+
240
+
241
+ // idとdisplayの設定
242
+ clone1.id = "clone1";
243
+ clone1.class = "sample";
244
+ clone1.style.left ="0px";
245
+ clone1.style.display ="block";
246
+
247
+
248
+ clone1.addEventListener("drag",moveItems)
249
+
250
+
251
+ // フローリングに表示
252
+ base = document.getElementById('box1')
253
+ base.appendChild(clone1);
254
+
255
+ }
256
+
257
+ function cloneElement2(){
258
+
259
+ const tpl = document.getElementById(kagu[2]);
260
+
261
+
262
+ const clone2 = tpl.cloneNode(true);
263
+
264
+
265
+ // idとdisplayの設定
266
+ clone2.id = "clone2";
267
+ clone2.class = "sample";
268
+ clone2.style.left ="0px";
269
+ clone2.style.display ="block";
270
+
271
+
272
+ clone2.addEventListener("drag",moveItems)
273
+
274
+ // フローリングに表示
275
+ base = document.getElementById('box1')
276
+ base.appendChild(clone2);
277
+
278
+ }
279
+
280
+
281
+
282
+ function cloneElement3(){
283
+
284
+ const tpl = document.getElementById(kagu[3]);
285
+
286
+
287
+ const clone3 = tpl.cloneNode(true);
288
+
289
+
290
+ // idとdisplayの設定
291
+ clone3.id = "clone3";
292
+ clone3.class = "sample";
293
+ clone3.style.left ="0px";
294
+ clone3.style.display ="block";
295
+
296
+
297
+ clone3.addEventListener("drag",moveItems)
298
+
299
+ // フローリングに表示
300
+ base = document.getElementById('box1')
301
+ base.appendChild(clone3);
302
+
303
+ }
304
+
305
+
306
+ function cloneElement4(){
307
+
308
+ const tpl = document.getElementById(kagu[4]);
309
+
310
+ const clone4 = tpl.cloneNode(true);
311
+
312
+
313
+ // idとdisplayの設定
314
+ clone4.id = "clone4";
315
+ clone4.class = "sample";
316
+ clone4.style.left ="0px";
317
+ clone4.style.display ="block";
318
+
319
+
320
+ clone4.addEventListener("drag",moveItems)
321
+
322
+ // フローリングに表示
323
+ base = document.getElementById('box1')
324
+ base.appendChild(clone4);
325
+
326
+ }
327
+
328
+
190
329
  ```
191
330
 
192
331
  ### 試したこと

1

html css jsのライブラリ名を追加させてもらいました。

2020/12/22 07:16

投稿

oasis
oasis

スコア2

title CHANGED
File without changes
body CHANGED
@@ -31,6 +31,93 @@
31
31
 
32
32
  ソースコード
33
33
 
34
+ HTML
35
+
36
+ <div class="menu-card-inner">
37
+ <img class="menu-image" src="./images/0fb8a39d38f69ae68fa57ed1edf7b9ec.jpg" alt="家具1">
38
+ <h3 class="menu-title">本棚<br>
39
+ 4800円</h3>
40
+ <button class ="btn" onclick="document.getElementById('contents1').style.visibility = 'visible';">クリック</button>
41
+ <button class ="btn" onclick=cloneElement()>追加</button>
42
+                     //この追加機能を直したいです
43
+
44
+ <button class ="btn" id="addbuton" onclick=remove()>削除</button>
45
+
46
+ </div>
47
+ </div>
48
+
49
+
50
+ css
51
+
52
+
53
+ .box2{
54
+ background-color: rgb(206, 182, 106);
55
+ float:right;
56
+ width: 400px;
57
+ height:470px;
58
+ margin-right:250px ;
59
+ background-image:url(../images/depositphotos_22441037-stock-photo-room-interior-vintage-with-white.jpg);
60
+ }
61
+
62
+ .menu-card {
63
+ width: 33%;
64
+ margin-top: 50px;
65
+ }
66
+ .menu-card-inner {
67
+ padding: 10px 10px;
68
+ background-color: #084d85;
69
+ border-radius: 7px;
70
+ box-shadow: 1px 1px 4px #d2d4d6;
71
+ text-align: center;
72
+ margin: 0 20px;
73
+ width: 100px;
74
+ height: 110px;
75
+ margin-top: 10px;
76
+
77
+ }
78
+ .menu-image {
79
+ width: 50px;
80
+ height: 50px;
81
+ margin-bottom: 8px;
82
+ border-radius: 5px;
83
+ }
84
+ .menu-title {
85
+ margin-bottom: 8px;
86
+ font-size: 90%;
87
+ }
88
+ .menu-text {
89
+ font-size: 14px;
90
+ }
91
+ .menu-card-wrapper {
92
+ display: flex;
93
+ flex-wrap: wrap;
94
+ }
95
+ h3{
96
+ color: white;
97
+ }
98
+ h2{
99
+
100
+ margin-top: px;
101
+ text-align: center;
102
+
103
+ }
104
+
105
+ .button1{
106
+ width: 50px;
107
+ height: 20px;
108
+ }
109
+ .menu-nedan {
110
+ margin-bottom: 8px;
111
+ font-size: 90%;
112
+ }
113
+
114
+
115
+
116
+
117
+ javascript
118
+
119
+ ライブラリは Yahoo! YUI Libraryを使用しています
120
+
34
121
  YAHOO.util.Event.addLister(window,"load",moveItems)
35
122
  //ライブりイベント
36
123