Q&A
コードはコードブロックで囲んでいただけませんか？ ```（バッククオート3つ）で囲み、前後に改行をいれるか、コードを選択して「</>」ボタンを押すとコードブロックになります。
http://ponk.jp/jquery/basic/image_move
こちらのサイト様に載っている、大きい画像の表示領域をマウスのドラッグで移動 するプログラムをスマホでも動くように書き換えたいのですが、どこを直せば良いでしょうか？
mousedown → touchstart に、
mousemove → touchmove に、
mouseup → touchend にしてみたのですが、動きませんでした。。
見当違いの質問でしたら申し訳ございません。
なにとぞご教授の程、よろしくお願いいたします。
###該当のソースコード
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script> <title>大きい画像の表示領域をマウスのドラッグで移動</title> <script> $(function() { var DIV_W = 320; var DIV_H = 240; var IMG_W = 1024; var IMG_H = 768; var x = 0; var y = 0; $('#move').css({ width: DIV_W, height: DIV_H, backgroundImage: 'url(himawari.jpg)' }).mousedown(function(e) { $(this).css('cursor', 'move'); var bx = e.pageX; var by = e.pageY; $(document).on('mousemove.move', function(e) { x += bx - e.pageX; bx = e.pageX; if (x < 0) x = 0; if (x > IMG_W - DIV_W) x = IMG_W - DIV_W; y += by - e.pageY; by = e.pageY; if (y < 0) y = 0; if (y > IMG_H - DIV_H) y = IMG_H - DIV_H; $('#move').css('background-position', '-' + x + 'px -' + y + 'px'); return false; }).one('mouseup', function() { $('#move').css('cursor', 'auto'); $(document).off('mousemove.move'); }); return false; }); }); </script> </head> <body> <div id="move"></div> </body> </html>
回答1件
0
ベストアンサー
ｽﾏﾎとPCだとﾎﾟｲﾝﾀの位置取得方法が違うみたい
javascript
1userAgent = window.navigator.userAgent.toLowerCase(); 2if(userAgent.match(new RegExp('iphone|android'))){ 3 bx = event.changedTouches[0].pageX; 4 by = event.changedTouches[0].pageY; 5}else{ 6 bx = event.pageX; 7 by = event.pageY; 8} 9
質問の所はこんな感じで書くとPCでもｽﾏﾎでも動きました
javascript
1 $("#move").on("mousedown touchstart",function(){
投稿2016/07/02 02:23
編集2016/07/02 02:29
退会済みユーザー
総合スコア0
あなたの回答
tips
プレビュー
