質問編集履歴

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

2020/12/22 15:33

投稿

oasis

スコア2

title CHANGED Viewed

File without changes

body CHANGED Viewed

@@ -158,20 +158,107 @@
 javascript
 ライブラリは　Yahoo! YUI Libraryを使用しています
+//回答を受けて再び編集しました
+　　協力していただきたけると助かります
+//ロード
+YAHOO.util.Event.addListener(window, "load", function(){
+    //家具の配列データ
+   var kagu =['contents1','contents2','contents3','contents4','contents5'];
+  　　　　　　　　　　　　　　　　　//kagu[0]→  本棚です
+   var ddObj = new YAHOO.util.DD(kagu[0]);
+   //X軸とY軸の指定
+   //フローリング規定 X300 Y322
+   ddObj.setXConstraint(0, 400, 10);
+   ddObj.setYConstraint(0, 400, 10);
+   var ddObj2 = new YAHOO.util.DD(kagu[1]);
+   ddObj2.setXConstraint(0, 400, 10);
+   ddObj2.setYConstraint(0, 400, 10);
+   var ddObj3 = new YAHOO.util.DD(kagu[2]);
+   ddObj3.setXConstraint(0, 400, 10);
+   ddObj3.setYConstraint(0, 400, 10);
+   var ddObj4 = new YAHOO.util.DD(kagu[3]);
+   ddObj4.setXConstraint(0, 400, 10);
+   ddObj4.setYConstraint(0, 400, 10);
+   var ddObj5 = new YAHOO.util.DD(kagu[4]);
+   ddObj5.setXConstraint(0, 400, 10);
+   ddObj5.setYConstraint(0, 400, 10);
+   // 家具の追加オブジャクト
+});
+//家具配列データ
+var kagu =['contents1','contents2','contents3','contents4','contents5'];
+//ボタン機能
+//スタートボタン
+function btn(){
+   document.getElementById(kagu[0]).style.left = "0px";
+   document.getElementById(kagu[1]).style.left = "80px";
+   document.getElementById(kagu[2]).style.left = "160px";
+   document.getElementById(kagu[3]).style.left = "240px";
+   document.getElementById(kagu[4]).style.left = "320px";
+}
+//商品一覧から画面遷移ボタン
+function btn0(){
+      document.getElementById(kagu[0]).style.left = 'visible';
+}
+function btn1(){
+   document.getElementById(kagu[1]).style.left = "80px";
+}
+function btn2(){
+   document.getElementById(kagu[2]).style.left = "160px";
+}
+function btn3(){
+   document.getElementById(kagu[3]).style.left = "240px";
+}
+function btn4(){
+   document.getElementById(kagu[4]).style.left = "320px";
+}
+// 追加　☆　質問する場所  エラーが起こっている場所  複製ボタン
 YAHOO.util.Event.addLister(window,"load",moveItems)
-//ライブりイベント
    function moveItems(){
       //クローンの配列化
+   //なんかの処理→移動制限
-   var ddObj6 = new YAHOO.util.DD("clone");
+   var ddObj = new YAHOO.util.DD("targetID");
-   ddObj6.setXConstraint(0, 322, 10);
+   ddObj.setXConstraint(0, 322, 10);
-   ddObj6.setYConstraint(0, 300, 10);
+   ddObj.setYConstraint(0, 300, 10);
@@ -201,131 +288,58 @@
    }
+   // 家具の追加オブジャクト
+   //回答者様に教えてもらったところ
+function cloneElement(furniture,kaguInd){
+      　　/*furnitureは種類として
+　　　　　　kaguIndは添え字として配列としてデータを格納するべきなのか？*/
-   // 家具の追加オブジャクト
+      //既存の家具をコピーする
+　　　　　　　　　　　　　//kagu[0]のcloneを作りたい場合？は具体例があると助かります！
-function cloneElement(){
+      　　　　　　　　　//kagu[0]は本棚です
-      //既存の家具をコピーする
+　　　　　　　　　　　　/*kagu[0]は？となった場合は一番最初のコードに記載している
+　　　　　　　　　　　　　既存の本棚のデータです
+　　　　　　　　　　　　　既存の本棚のクローンを作る具体例をよろしくお願いします！*/
-      const tpl   = document.getElementById(kagu[0]);
+      const tpl   = document.getElementById(kagu[kaguInd]);
       const clone = tpl.cloneNode(true);
+      const targetIDPrefix = furniture + "clone";
+      const suffix = document.querySelectorAll('[id^='+targetIDPrefix+']').length;
+      // ~Clone0とか~Clone1みたいに後ろの数字が要素の数に応じて増えていく
+      clone.id = targetIDPrefix + suffix;
       // idとdisplayの設定
-     clone.id         = "clone";
+     clone.id         = furniture+"clone";
      clone.class     = "sample";
      clone.style.left    ="0px";
      clone.style.display ="block";
       //クローンにマウスドラックイベントを追加する
-      clone.addEventListener("drag",moveItems)
+      clone.addEventListener("drag",function(){
+         moveItems(this.id);
+      });
       //フローリングに出力
      base = document.getElementById('box1')
      base.appendChild(clone);
-//同じイベント処理をもつ家具を何回も出力するようにしたいです
-}
- function cloneElement1(){
-//追加しました
+}
-   const   tpl   = document.getElementById(kagu[1]);
-   const  clone1 = tpl.cloneNode(true);
-      // idとdisplayの設定
-      clone1.id         = "clone1";
-      clone1.class     = "sample";
-      clone1.style.left    ="0px";
-      clone1.style.display ="block";
-      clone1.addEventListener("drag",moveItems)
-      // フローリングに表示
-      base = document.getElementById('box1')
-      base.appendChild(clone1);
-    }
-    function cloneElement2(){
-      const   tpl   = document.getElementById(kagu[2]);
-      const  clone2 = tpl.cloneNode(true);
-         // idとdisplayの設定
-         clone2.id         = "clone2";
-         clone2.class     = "sample";
-         clone2.style.left    ="0px";
-         clone2.style.display ="block";
-         clone2.addEventListener("drag",moveItems)
-         // フローリングに表示
-         base = document.getElementById('box1')
-         base.appendChild(clone2);
-       }
-       function cloneElement3(){
-         const   tpl   = document.getElementById(kagu[3]);
-         const  clone3 = tpl.cloneNode(true);
-            // idとdisplayの設定
-            clone3.id         = "clone3";
-            clone3.class     = "sample";
-            clone3.style.left    ="0px";
-            clone3.style.display ="block";
-            clone3.addEventListener("drag",moveItems)
-            // フローリングに表示
-            base = document.getElementById('box1')
-            base.appendChild(clone3);
-          }
-          function cloneElement4(){
-            const   tpl   = document.getElementById(kagu[4]);
-            const  clone4 = tpl.cloneNode(true);
-               // idとdisplayの設定
-               clone4.id         = "clone4";
-               clone4.class     = "sample";
-               clone4.style.left    ="0px";
-               clone4.style.display ="block";
-               clone4.addEventListener("drag",moveItems)
-               // フローリングに表示
-               base = document.getElementById('box1')
-               base.appendChild(clone4);
-             }
 ```
 ### 試したこと

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

2020/12/22 15:33

投稿

oasis

スコア2

title CHANGED Viewed

File without changes

body CHANGED Viewed

@@ -45,8 +45,49 @@
   </div>
 </div>
+<div class="menu-card">
+  <div class="menu-card-inner">
+  <img class="menu-image" src="./images/trend_20150716131537.jpg" alt="家具１">
+  <h3 class="menu-title">テレビ<br>
+                         27000円</h3>
+  <button  class ="btn" onclick="document.getElementById('contents2').style.visibility = 'visible';">クリック</button>
+  <button  class ="btn" onclick="cloneElement1();stopclone()">追加</button>
+    </div>
+    </div>
+    <div class="menu-card">
+      <div class="menu-card-inner">
+      <img class="menu-image" src="./images/1b71e2b924b8a56374648cb8efdc1958.jpg" alt="家具１">
+      <h3 class="menu-title">机<br>
+                            3000円
+      </h3>
+      <button  class ="btn" onclick="document.getElementById('contents3').style.visibility = 'visible';">クリック</button>
+      <button  class ="btn" onclick=cloneElement2()>追加</button>
+        </div>
+      </div>
+      <div class="menu-card">
+        <div class="menu-card-inner">
+          <img class="menu-image" src="./images/471429001.jpg" alt="レモネード">
+          <h3 class="menu-title">食器棚<br>
+                                 8000円</h3>
+          <button  class ="btn" onclick="document.getElementById('contents4').style.visibility = 'visible';">クリック</button>
+          <button  class ="btn" onclick=cloneElement3()>追加</button>
+        </div>
+      </div>
+      <div class="menu-card">
+        <div class="menu-card-inner">
+          <img class="menu-image" src="./images/mv_raffia-1.jpg" alt="カフェラテ">
+          <h3 class="menu-title">ベット<br>
+                                16000円</h3>
+          <button  class ="btn" onclick="document.getElementById('contents5').style.visibility = 'visible';">クリック</button>
+          <button  class ="btn" onclick=cloneElement4()>追加</button>
+        </div>
+      </div>
+//追加しました
 css
@@ -187,6 +228,104 @@
 //同じイベント処理をもつ家具を何回も出力するようにしたいです
 }
+ function cloneElement1(){
+//追加しました
+   const   tpl   = document.getElementById(kagu[1]);
+   const  clone1 = tpl.cloneNode(true);
+      // idとdisplayの設定
+      clone1.id         = "clone1";
+      clone1.class     = "sample";
+      clone1.style.left    ="0px";
+      clone1.style.display ="block";
+      clone1.addEventListener("drag",moveItems)
+      // フローリングに表示
+      base = document.getElementById('box1')
+      base.appendChild(clone1);
+    }
+    function cloneElement2(){
+      const   tpl   = document.getElementById(kagu[2]);
+      const  clone2 = tpl.cloneNode(true);
+         // idとdisplayの設定
+         clone2.id         = "clone2";
+         clone2.class     = "sample";
+         clone2.style.left    ="0px";
+         clone2.style.display ="block";
+         clone2.addEventListener("drag",moveItems)
+         // フローリングに表示
+         base = document.getElementById('box1')
+         base.appendChild(clone2);
+       }
+       function cloneElement3(){
+         const   tpl   = document.getElementById(kagu[3]);
+         const  clone3 = tpl.cloneNode(true);
+            // idとdisplayの設定
+            clone3.id         = "clone3";
+            clone3.class     = "sample";
+            clone3.style.left    ="0px";
+            clone3.style.display ="block";
+            clone3.addEventListener("drag",moveItems)
+            // フローリングに表示
+            base = document.getElementById('box1')
+            base.appendChild(clone3);
+          }
+          function cloneElement4(){
+            const   tpl   = document.getElementById(kagu[4]);
+            const  clone4 = tpl.cloneNode(true);
+               // idとdisplayの設定
+               clone4.id         = "clone4";
+               clone4.class     = "sample";
+               clone4.style.left    ="0px";
+               clone4.style.display ="block";
+               clone4.addEventListener("drag",moveItems)
+               // フローリングに表示
+               base = document.getElementById('box1')
+               base.appendChild(clone4);
+             }
 ```
 ### 試したこと

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

2020/12/22 07:16

投稿

oasis

スコア2

title CHANGED Viewed

File without changes

body CHANGED Viewed

@@ -31,6 +31,93 @@
 ソースコード
+HTML
+<div class="menu-card-inner">
+    <img class="menu-image" src="./images/0fb8a39d38f69ae68fa57ed1edf7b9ec.jpg" alt="家具１">
+    <h3 class="menu-title">本棚<br>
+                           4800円</h3>
+    <button  class ="btn" onclick="document.getElementById('contents1').style.visibility = 'visible';">クリック</button>
+    <button  class ="btn" onclick=cloneElement()>追加</button>
+　　　　　　　　　　　　　　　　　　　　//この追加機能を直したいです
+    <button  class ="btn" id="addbuton" onclick=remove()>削除</button>
+  </div>
+</div>
+css
+.box2{
+    background-color: rgb(206, 182, 106);
+    float:right;
+    width: 400px;
+    height:470px;
+    margin-right:250px ;
+    background-image:url(../images/depositphotos_22441037-stock-photo-room-interior-vintage-with-white.jpg);
+}
+.menu-card {
+    width: 33%;
+    margin-top: 50px;
+  }
+  .menu-card-inner {
+    padding: 10px 10px;
+    background-color: #084d85;
+    border-radius: 7px;
+    box-shadow: 1px 1px 4px #d2d4d6;
+    text-align: center;
+    margin: 0 20px;
+    width: 100px;
+    height: 110px;
+    margin-top: 10px;
+  }
+  .menu-image {
+    width: 50px;
+    height: 50px;
+    margin-bottom: 8px;
+    border-radius: 5px;
+  }
+  .menu-title {
+    margin-bottom: 8px;
+    font-size: 90%;
+  }
+  .menu-text {
+    font-size: 14px;
+  }
+  .menu-card-wrapper {
+    display: flex;
+    flex-wrap: wrap;
+  }
+  h3{
+    color: white;
+  }
+  h2{
+    margin-top: px;
+    text-align: center;
+  }
+  .button1{
+    width: 50px;
+    height: 20px;
+  }
+  .menu-nedan {
+    margin-bottom: 8px;
+    font-size: 90%;
+  }
+javascript
+ライブラリは　Yahoo! YUI Libraryを使用しています
 YAHOO.util.Event.addLister(window,"load",moveItems)
 //ライブりイベント