ここから本文です

お世話になります。Javasxript勉強中の者です。 <現状作成している内容> 下...

it_********さん

2019/3/1323:00:03

お世話になります。Javasxript勉強中の者です。

<現状作成している内容>
下記ページのようにパズルのようなオブジェクトをドラッグで移動する機能を作成しています。

http://ksm877.php.xdomain.jp/sample1/ec_html_1/canvas_test/for_yaho...
(参考にしたページ:http://jsdo.it/hikatsuka/gQ5h
※現在リンクが切れてるかもしれません。)

<課題>
環境によってこのドラッグができないものがあります。
下記のようなスマホで画像をタップした時のように、全体がグレーの網掛けが出るような挙動になってしまって、ドラッグできないといった状態です。

現象を確認した環境は以下の通りです。
できる環境 :PC→スマホ(iOS)[safari]、MacOS [Chrome、Safari]
できない環境:スマホ(iOS、Android両方)→[Chrome]

<実現したいこと>
上記できない環境(できれば全てのブラウザに対応したいですが)でもどらっぐができるようにしたいです。
どこに手を加えればできるのか、またはブラウザの仕様で不可能なのか、調べてもわからない状態です。


お忙しいところお手を煩わせてしまいますが、解決できず困っているのでどうか助けていただけると大変嬉しく思います。
皆さんにとって便利になるサービスを作れるようになるのが目標です。

どうかよろしくお願い致します。

閲覧数:
55
回答数:
1
お礼:
100枚

違反報告

ベストアンサーに選ばれた回答

yay********さん

2019/3/1401:47:44

iOSだけタッチイベントで取得してるからです。
スマホ、タブレットだけタッチからの取得に変えればいい。

if (isiPad || isiPhone) {
//iPad & iPhone逕ィ蜃ヲ逅
mouseX1 = e.touches[0].pageX - rect.left;
mouseY1 = e.touches[0].pageY - rect.top;
} else {
//PC逕ィ蜃ヲ逅
mouseX1 = e.clientX - rect.left;
mouseY1 = e.clientY - rect.top;
}

×Javasxript
○Javascript

返信を取り消しますが
よろしいですか?

  • 取り消す
  • キャンセル

みんなで作る知恵袋 悩みや疑問、なんでも気軽にきいちゃおう!

Q&Aをキーワードで検索:

Yahoo! JAPANは、回答に記載された内容の信ぴょう性、正確性を保証しておりません。
お客様自身の責任と判断で、ご利用ください。
本文はここまでです このページの先頭へ

「追加する」ボタンを押してください。

閉じる

※知恵コレクションに追加された質問は選択されたID/ニックネームのMy知恵袋で確認できます。

不適切な投稿でないことを報告しました。

閉じる