10

最近、私はiPadで実行される関数Webアプリのような電子ブックを実装しました。1つの機能は、本をドラッグするためのビューポートを作成することです。私はこのビューポートプラグインを使用しました（デモ付き）： http： //borbit.github.com/jquery.viewport/

問題は、コンテンツがドラッグできないことです。これはデスクトップでは完全に機能しますが、iPadでは機能しません。電子ブックには2つのレベルがあり、低レベルは本のページです。ユーザーが本をクリックすると、オーバーレイ（トップレベル）が表示され、ドラッグするためのより大きなdivになります。私はipadがより高いレベルのdivを迅速に処理できないと思います。ipadでビューポート（上記のリンクの例を参照）を実装する方法はありますか？ありがとう

<div id="view" style="height: 385px; width: 1422px; position: relative; overflow: hidden; display: block;">
<div class="viewportBinder" style="position: absolute; overflow: hidden; height: 2541px; top: -1078px; width: 1247px; left: 88px;">
<div class="viewportContent ui-draggable" style="position: absolute; height: 1463px; width: 1247px; top: 329.98150634765625px; left: 0px;">
<div id="popup" style="height: 1463px; width: 1247px; display: block;"><img id="largeText" src="http://203.80.1.28/FlippingBook/development/demo/original/Web081112_P001_text.png"><img id="largeImg" src="http://203.80.1.28/FlippingBook/development/demo/original/Web081112_P001_image.jpg">
</div>
</div>
</div>
</div>
4

1 に答える 1

3

これは jQuery UI Touch Punch を使用して簡単に解決できると思います。このプラグインは、jQuery UI のタッチ イベント サポートを追加します。

http://touchpunch.furf.com/

ビューポート スクリプトの前で、UI スクリプトの後にスクリプトを追加してみてください。次に例を示します。

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.10/jquery-ui.min.js"></script>   
<script type="text/javascript" src="jquery.ui.touch-punch.js"></script>
<script type="text/javascript" src="jquery.viewport.js"></script>
<script type="text/javascript" src="https://github.com/borbit/jquery.scraggable/raw/master/jquery.scraggable.js"></script>

それだけです！

于 2012-12-19T12:22:54.653 に答える