javascriptでドラッグアンドドロップ処理をしようとしているのですが、
スマホでやると、時々うまくいって、時々うまくいきません。
コードを見直してはみたもののどう直せばいいのかよくわかりません。
やりたいこと
・画像をドラッグアンドドロップ(のスマホver)できるようにする
・画像は常に初期位置にもあるようにする
→初期位置からドラッグアンドドロップを実行すると、初期位置にコピーが作成される
・画像を左上のほう(座標は指定) にもっていくとその画像を削除する
現状
・PCでやるとうまくいく
・スマホで実行した場合に、初めの3回ほどはドラッグアンドドロップが成功するが、
その後、初期位置にある画像が全く動かなくなる。(それ以外の位置にある、ドロップ済みの画像は動く)
※mousdownとtouchstartイベント(同時に発火する) に関して、片方をコメントアウトしましたが、結果は変わりませんでした。
質問1:毎回うまくいくようにするには、どうすればいいですか?
質問2:ちょっと動きが遅い感じがあるので、無駄な部分・改善すべきところなどはありますか?
開発/実行環境:
monaca/ monacaのデバッカー
少し長めです。
html
1<body> 2 <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script> 3 <script src="FCP1.js"></script> 4 <script src="style.js"></script> 5 6 <a id="picture1"><img src="http://newgame-anime.com/assets/character/th-c1.png" alt="New Game" id="img1" class="menu" ></a> 7 <a id="picture2"><img src="http://newgame-anime.com/assets/character/th-c2.png" alt="New Game" id="img2" class="menu" ></a> 8
なお、つかってる画像については何も言わないでくださいw
javascript
1//FCP1.js 2$(function () { 3 4 // 画面幅 5 var W=screen.width; 6 // 画面高 7 var H=screen.height; 8 9 //縮尺調整 10 var s1=5 11 12 //以下ドラッグアンドドロップ処理 13 var cnt = 0; 14 var elements = document.getElementsByClassName("menu"); 15 16 //要素内のクリックされた位置を取得するグローバル(のような)変数 17 var x; 18 var y; 19 20 21 //マウスが要素内で押されたとき、又はタッチされたとき発火 22 for (var i = 0; i < elements.length; i++) { 23 elements[i].addEventListener("mousedown", mdown, false); 24 elements[i].addEventListener("touchstart", mdown, false); 25 } 26 27 28 //マウスが押された際の関数 29 function mdown(e) { 30 31 //クローン作製---------------------------------↓ 32 if(this.getBoundingClientRect().left< W/s1 && this.getBoundingClientRect().top<H/s1){ 33 var clone = this.parentNode.cloneNode(true); 34 clone.id = "new" + (cnt++); 35 clone.style.left = "100px" 36 document.body.appendChild(clone); 37 clone.getElementsByClassName("menu")[0].addEventListener("mousedown", mdown, false); 38 elements[i].addEventListener("touchstart", mdown, false); 39 } 40 //--------------------------------------------↑ 41 42 //クラス名に .drag を追加 43 this.classList.add("drag"); 44 45 46 //タッチイベントとマウスのイベントの差異を吸収 47 if (e.type === "mousedown") { 48 var event = e; 49 } else { 50 var event = e.changedTouches[0]; 51 } 52 53 //要素内の相対座標を取得 54 x = event.pageX - this.offsetLeft; 55 y = event.pageY - this.offsetTop; 56 57 //ムーブイベントにコールバック 58 document.body.addEventListener("mousemove", mmove, false); 59 document.body.addEventListener("touchmove", mmove, false); 60 } 61 62 //マウスカーソルが動いたときに発火 63 function mmove(e) { 64 65 //ドラッグしている要素を取得 66 var drag = document.getElementsByClassName("drag")[0]; 67 68 69 //同様にマウスとタッチの差異を吸収 70 if (e.type === "mousemove") { 71 var event = e; 72 } else { 73 var event = e.changedTouches[0]; 74 } 75 76 77 //フリックしたときに画面を動かさないようにデフォルト動作を抑制 78 e.preventDefault(); 79 80 //マウスが動いた場所に要素を動かす 81 drag.style.top = event.pageY - y + "px"; 82 drag.style.left = event.pageX - x + "px"; 83 84 //マウスボタンが離されたとき、またはカーソルが外れたとき発火 85 drag.addEventListener("mouseup", mup, false); 86 drag.addEventListener("touchend", mup, false); 87 88 } 89 90 //マウスボタンが上がったら発火 91 function mup(e) { 92 var drag = document.getElementsByClassName("drag")[0]; 93 94 //ムーブベントハンドラの消去 95 document.body.removeEventListener("mousemove", mmove, false); 96 drag.removeEventListener("mouseup", mup, false); 97 document.body.removeEventListener("touchmove", mmove, false); 98 drag.removeEventListener("touchend", mup, false); 99 100 //スクロールで動くようにする 101 drag.style.position= "absolute"; 102 103 //クラス名 .drag も消す 104 drag.classList.remove("drag"); 105 106 107 if(this.getBoundingClientRect().left<W/s1 && this.getBoundingClientRect().top<H/s1 ){ 108 this.parentNode.removeChild(this); 109 110 } 111 112 113 } 114}); 115
この下はたぶんあんまり関係ないです
javascript
1//style.js 2$(function () { 3// 画面幅 4var W=screen.width; 5// 画面高 6var H=screen.height; 7 8console.log(H); 9console.log(W); 10 11var S=500; 12$("#img1").css({ 13 position: "absolute", 14 top: H / 20 + "px", 15 left: W / 20 + "px", 16 width: W / 5 + "px" 17}); 18 19$("#img2").css({ 20 position: "absolute", 21 top: H /20 +W/5 + "px", 22 left: W / 20 + "px", 23 width: W / 5 + "px" 24}); 25 26});
回答1件
あなたの回答
tips
プレビュー