質問編集履歴

ソースコードを間違いました

2021/01/22 12:36

投稿

oasis

スコア2

test CHANGED Viewed

	@@ -1 +1 @@
1	- javascript clone.node(true)で同じ要素を複製したい
1	+ javascript clone.node(true)で同じイベントを持つ要素を複製したい

test CHANGED Viewed

@@ -2,41 +2,21 @@
 javascriptで
-マウスドラックを用いた家具の配置2Dシミレーション(枠内を指定したフローリング)を実装したいと思っています
+マウスドラックを用いた家具の配置2Dシミレーション(枠内を指定したフローリング)を
+実装したいと思っていますmousedown→mousemove→mousedownのイベントを使用
 ### 発生している問題・エラーメッセージ
-同じ家具をフローリングに出力する追加機能を持つボタンを作成している時に
+クリックを押すと度に同じイベントを持つ家具がが出力されるようにしたくて
+一つ目の家具はmouseupで外れるのですが
+一つ目のcloneを複製しmousedownしmousemoveで画像は動かせるのですが
-既存の本棚に対して同じイベント処理(枠内のマウスドラック)を
+肝心のmouseupで画像がマウスから離れません
-追加した本棚をclone.Nodeも用いて出力することができましたが
-(2つまでの出力は成功）
-（3つ目を試みると)
-もう一度
-追加ボタンを押すと本棚は出力されるのですが、
-イベント処理(枠内マウスドラック)が追加されず適用されずにドラックができません。
 ```
@@ -44,7 +24,9 @@
 ```
+250行目のconsoleが出力できないので
+210行目付近でclone.mouseupイベントで問題が起こっているかも
 ### 該当のソースコード
@@ -52,7 +34,9 @@
 ```ここに言語名を入力
-javascript ライブラリを使用Jqueryは使用していません
+javascript ライブラリを使用していません
+Jqueryは使用していません
@@ -60,641 +44,15 @@
 ソースコード
+https://codepen.io/wonderwall1996/pen/zYKXbMj
-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>
-<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
-.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を使用しています
-//回答を受けて再び編集しました
+ソースコードが長いのでcode.penに載せました
-　　協力していただきたけると助かります
-//ロード
-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 ddObj = new YAHOO.util.DD("targetID");
-   ddObj.setXConstraint(0, 322, 10);
-   ddObj.setYConstraint(0, 300, 10);
-   var ddObj7 = new YAHOO.util.DD("clone1");
-   ddObj7.setXConstraint(0, 322, 10);
-   ddObj7.setYConstraint(0, 300, 10);
-   var ddObj8 = new YAHOO.util.DD("clone2");
-   ddObj8.setXConstraint(0, 322, 10);
-   ddObj8.setYConstraint(0, 300, 10);
-   var ddObj9 = new YAHOO.util.DD("clone3");
-   ddObj9.setXConstraint(0, 322, 10);
-   ddObj9.setYConstraint(0, 300, 10);
-   var ddObj10 = new YAHOO.util.DD("clone4");
-   ddObj10.setXConstraint(0, 322, 10);
-   ddObj10.setYConstraint(0, 300, 10);
-   }
-   // 家具の追加オブジャクト
-   //回答者様に教えてもらったところ
-function cloneElement(furniture,kaguInd){
-      　　/*furnitureは種類として
-　　　　　　kaguIndは添え字として配列としてデータを格納するべきなのか？*/
-      //既存の家具をコピーする
-　　　　　　　　　　　　　//kagu[0]のcloneを作りたい場合？は具体例があると助かります！
-      　　　　　　　　　//kagu[0]は本棚です
-　　　　　　　　　　　　/*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         = furniture+"clone";
-     clone.class     = "sample";
-     clone.style.left    ="0px";
-     clone.style.display ="block";
-      //クローンにマウスドラックイベントを追加する
-      clone.addEventListener("drag",function(){
-         moveItems(this.id);
-      });
-      //フローリングに出力
-     base = document.getElementById('box1')
-     base.appendChild(clone);
-}
-```
 ### 試したこと
+console.logで確認しながら
-for文を用いて繰り返しなのかと考え試行錯誤して
-クローンの複製のところcloenElementに
-for文をつけ足してみたのですが,うまく動きませんでした。
+mouseupのイベントが外れていないところまでは特定できたのですがそこから先がとても苦戦しています