編集履歴

質問編集履歴

文法の修正

2019/11/29 02:56

投稿

minomonnta

スコア9

test CHANGED Viewed

File without changes

test CHANGED Viewed

@@ -47,269 +47,3 @@
   </p>
 ```
-```javascript
-window.onload = function() {
-    //要素の取得
-    var elements = document.getElementsByClassName("drag-and-drop");
-    //要素内のクリックされた位置を取得するグローバル（のような）変数
-    var x;
-    var y;
-        //マウスが要素内で押されたとき、又はタッチされたとき発火
-    for(var i = 0; i < elements.length; i++) {
-        elements[i].addEventListener("mousedown", mdown, false);
-        elements[i].addEventListener("touchstart", mdown, false);
-    }
-    //マウスが押された際の関数
-    function mdown(e) {
-        //クラス名に .drag を追加
-        this.classList.add("drag");
-        //タッチデイベントとマウスのイベントの差異を吸収
-        if(e.type === "mousedown") {
-            var event = e;
-        } else {
-            var event = e.changedTouches[0];
-        }
-        //要素内の相対座標を取得
-        x = event.pageX - this.offsetLeft;
-        y = event.pageY - this.offsetTop;
-        //ムーブイベントにコールバック
-        document.body.addEventListener("mousemove", mmove, false);
-        document.body.addEventListener("touchmove", mmove, false);
-    }
-    //マウスカーソルが動いたときに発火
-    function mmove(e) {
-        //ドラッグしている要素を取得
-        var drag = document.getElementsByClassName("drag")[0];
-        //同様にマウスとタッチの差異を吸収
-        if(e.type === "mousemove") {
-            var event = e;
-        } else {
-            var event = e.changedTouches[0];
-        }
-        //フリックしたときに画面を動かさないようにデフォルト動作を抑制
-        e.preventDefault();
-        //マウスが動いた場所に要素を動かす
-        drag.style.top = event.pageY - y + "px";
-        drag.style.left = event.pageX - x + "px";
-        //マウスボタンが離されたとき、またはカーソルが外れたとき発火
-        drag.addEventListener("mouseup", mup, false);
-        document.body.addEventListener("mouseleave", mup, false);
-        drag.addEventListener("touchend", mup, false);
-        document.body.addEventListener("touchleave", mup, false);
-    }
-    //マウスボタンが上がったら発火
-    function mup(e) {
-        var drag = document.getElementsByClassName("drag")[0];
-        //ムーブベントハンドラの消去
-        document.body.removeEventListener("mousemove", mmove, false);
-        drag.removeEventListener("mouseup", mup, false);
-        document.body.removeEventListener("touchmove", mmove, false);
-        drag.removeEventListener("touchend", mup, false);
-        //クラス名 .drag も消す
-        drag.classList.remove("drag","drag2","drag3");
-    }
-}
-document.body.addEventListener( "click", function( event ) {
-	var x = event.pageX ;
-	var y = event.pageY ;
-} ) ;
-window.addEventListener("click", function(){
-  let px = event.pageX;  //クリックX
-  let py = event.pageY;  //クリックY
-  let ox = window.pageXOffset;  //スクロールX
-  let oy = window.pageYOffset;  //スクロールY
-  let obj = document.elementFromPoint(px - ox, py - oy);  //object
-  let objX = obj.getBoundingClientRect().left;  //objectのX
-  let objY = obj.getBoundingClientRect().top;   //objectのY
-  console.log("クリックした位置のX座標　x:" + (px-ox));
-  console.log("クリックした位置のY座標　y:" + (py-oy));
-  console.log("クリックした要素のX座標　x:" + objX);
-  console.log("クリックした要素のY座標　y:" + objY);
-});
-document.getElementById("target").addEventListener('click', function(event) {
-    var kimetu = event.pageX ; // 水平の位置座標
-    var yaiba = event.pageY ; // 垂直の位置座標
-    document.getElementsByName('zahyou')[0].value = kimetu + ":" + yaiba;
-});
-function muuXY(e, that) {
-    if (!e) e = window.event;
-    var x, y;
-    if (e.targetTouches) {
-        x = e.targetTouches[0].pageX - e.target.offsetLeft;
-        y = e.targetTouches[0].pageY - e.target.offsetTop;
-    }else if (that){
-        x = e.pageX - that.offsetLeft;
-        y = e.pageY - that.offsetTop;
-    }
-    return [x,y];
-}
-```

文法の修正

2019/11/29 02:56

投稿

minomonnta

スコア9

test CHANGED Viewed

File without changes

test CHANGED Viewed

@@ -1,10 +1,6 @@
-要素A、要素B、要素C・・・という風に追加と削除したい
+追加ボタン、削除ボタンそれぞれクリックすると
-追加、削除したときにテキストボックスも連動してできるようにしたい
+要素とテキストボックスがそれぞれ、追加、削除されるようにしたい
 ```html
@@ -12,11 +8,15 @@
 <div class="drag-and-drop"  id="target"  style="top:1;left:0px;background-color:#ffa500;">要素A</div>
+//追加ボタン
-<div class="drag-and-drop2" id="target2" style="top:1;left:110px;background-color:#ffa500;">要素B</div>
+<input type="button"  value="追加">
+//削除ボタン
-<div class="drag-and-drop3" id="target3" style="top:1;left:220px;background-color:#ffa500;">要素C</div>
+<input type="button"  value="削除">
@@ -36,32 +36,22 @@
   </p>
+　//送信
   <p>
-  要素B
-  <input type="text" value="クリックしてね☆" name="zahyou2">
+  <input type="submit" value="次へ" name="send">
   </p>
-  <p>
-  要素C
-  <input type="text" value="クリックしてね☆" name="zahyou3">
-　//送信
-  <p>
-  <input type="submit" value="次へ" name="send">
-  </p>
 ```
 ```javascript
 window.onload = function() {
@@ -72,9 +62,7 @@
     var elements = document.getElementsByClassName("drag-and-drop");
-    var elements2 = document.getElementsByClassName("drag-and-drop2");
-    var elements3 = document.getElementsByClassName("drag-and-drop3");
@@ -96,26 +84,6 @@
     }
-        //マウスが要素内で押されたとき、又はタッチされたとき発火
-    for(var i = 0; i < elements.length; i++) {
-        elements2[i].addEventListener("mousedown", mdown, false);
-        elements2[i].addEventListener("touchstart", mdown, false);
-    }
-        //マウスが要素内で押されたとき、又はタッチされたとき発火
-    for(var i = 0; i < elements.length; i++) {
-        elements3[i].addEventListener("mousedown", mdown, false);
-        elements3[i].addEventListener("touchstart", mdown, false);
-    }
@@ -130,13 +98,7 @@
         this.classList.add("drag");
-        //クラス名に .drag2 を追加
-        this.classList.add("drag2");
-        //クラス名に .drag3 を追加
-        this.classList.add("drag3");
@@ -182,13 +144,7 @@
         var drag = document.getElementsByClassName("drag")[0];
-        //ドラッグしている要素を取得
-        var drag2 = document.getElementsByClassName("drag2")[0];
-        //ドラッグしている要素を取得
-        var drag3 = document.getElementsByClassName("drag3")[0];
@@ -240,7 +196,7 @@
     function mup(e) {
-        var drag = document.getElementsByClassName("drag","drag2","drag3")[0];
+        var drag = document.getElementsByClassName("drag")[0];
@@ -326,27 +282,7 @@
-document.getElementById( "target2" ).addEventListener('click', function(event) {
-    var kuroko = event.pageX ; // 水平の位置座標
-    var basuke = event.pageY ; // 垂直の位置座標
-    document.getElementsByName('zahyou2')[0].value = kuroko + ":" + basuke;
-});
-document.getElementById( "target3" ).addEventListener('click', function(event) {
-    var saikikusuo = event.pageX ; // 水平の位置座標
-    var sainann    = event.pageY ; // 垂直の位置座標
-    document.getElementsByName('zahyou3')[0].value = saikikusuo + ":" + sainann;
-});