在ipad上實現jQuery視口

Question

最近我實現了一個電子書，就像在ipad上運行的功能web應用一樣。一個功能是製作一個視口來拖動書本。我用這個視口插件（與演示）：http://borbit.github.com/jquery.viewport/

問題是內容不能拖動。這在桌面上完美的工作，但不是ipad。 電子書有兩個層次，低層次是書頁。當用戶點擊這本書時，會顯示一個疊加層（頂層），這是一個更大的拖動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> 

Answer 1

我認爲這可以很容易地解決使用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> 

，這一切！