Question

最近我在ipad上运行了一个类似功能的网络应用程序。一个功能是使视口拖动书。我使用了这个视口插件（带演示）：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>

就是这样！

在ipad上实现Jquery视口

1 个答案: