質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

Monaca

「Monaca」はiOS、Android、Windows向けのアプリ開発に対応した、Cordovaベースのモバイルアプリ開発プラットフォームです。HTML5、JavaScriptといったWeb標準技術を用いてモバイルアプリ開発を行うことができます。

Q&A

解決済

1回答

3115閲覧

ドラッグアンドドロップ処理が時々うまくいく

moscow3

総合スコア201

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

Monaca

「Monaca」はiOS、Android、Windows向けのアプリ開発に対応した、Cordovaベースのモバイルアプリ開発プラットフォームです。HTML5、JavaScriptといったWeb標準技術を用いてモバイルアプリ開発を行うことができます。

0グッド

1クリップ

投稿2017/10/08 20:57

編集2017/10/09 05:10

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});

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

s8_chu

2017/10/08 21:07

どのようにうまくいかないのかを詳しく質問文に追記していただけませんか?
karamarimo

2017/10/09 04:41

スマホだとタップしたとき"mousedown"と"touchstart"イベントが両方発生しますが大丈夫ですか?
moscow3

2017/10/09 05:11

※mousdownとtouchstartイベントに関して、片方をずつコメントアウトしましたが、結果は変わりませんでした。
moscow3

2017/10/09 05:12

正確には、mousdown のみ発生させたときは2回。 touchstartのみ発生させたときは3回だけ操作ができました。
guest

回答1

0

ベストアンサー

各関数の中で、イベントのつけはがしをしてるようですが、
for文のところで全部つけてしまったほうがいいんじゃないですか?
多分イベントが正しくmousedown→mousemove→mouseupの順で動かない限り失敗しますよね。
速度についても毎回addEventListener/removeEventListener呼んでる所為じゃないかと思います。
内部的には馬鹿でかいオブジェクトを作ったり壊したりしてるんでしょう。多分。

投稿2017/10/11 11:19

deigo

総合スコア200

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

moscow3

2017/10/11 15:31

了解です。 試してみます
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問