web-dev-qa-db-ja.com

iOSサファリがWebページウィンドウを移動しないようにして、ドラッグイベントが発生する可能性がある

マルチタッチの動的ドラッグにPep.jsを使用していますが、iOSのサファリでオブジェクトをドラッグしようとすると、ウィンドウ自体が移動してドラッグに追従するため、ドラッグイベントが登録されません。

Webページの<div>をドラッグできるように、ブラウザウィンドウがドラッグに追従しないようにするにはどうすればよいですか？

問題のウェブページは次のとおりです： http://goo.gl/TsHgh 。リンクをクリックすると、<div>がスライドインします。ドラッグ可能なのはそのdivです。デスクトップブラウザで動作しますが、サファリがドラッグと一緒にウィンドウを移動するため、マルチタッチでドラッグすることはできません。

javascriptjqueryiossafarimulti-touch
13
Django Johnson

＃ionicframework で作業しているときに、この解決策を見つけました

CSS：

html, body {
  overflow:hidden;
}

JS：

$(window).bind(
  'touchmove',
   function(e) {
    e.preventDefault();
  }
);
32
Nick Treadway

あなたのアニメーションが問題の原因です。

さて、あなたのアニメーションが適用されているクラス。

アニメーションが完了したら、クラスを削除します。

setTimeout(function(){
    $('#tabViewWindow').removeClass('animated').removeClass('bounceInRight');
}, 1200);

また、ウィンドウのスクロールを無効にするには：

html, body{
    overflow:hidden;
}
0
Django Johnson